JQuery标签页效果的两个实例讲解（4）

2024-09-26 19:45:54

按照惯例，我们还是先来看一下最终要达到效果图：

和上一个菜单效果类似，当鼠标移动到标签上的时候，下面会显示相应的内容。当然，同样存在滑动门的问题。
前台页面的代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="tab.aspx.cs" Inherits="tab" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <link href="css/tab.css" rel="stylesheet" type="text/css" />
  <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
  <script src="js/tab.js" type="text/javascript"></script>
</head>
<body>
  <form id="form1" runat="server">
  <div id="firstDiv">
    <ul>
      <li class="tabin">标签一</li>
      <li>标签二</li>
      <li>标签三</li>
    </ul>
    <div class="contentin">
      我是标签一的内容</div>
    <div>
      我是标签二的内容</div>
    <div>
      我是标签三的内容</div>
  </div>
  </form>
</body>
</html>

tab.css

ul,li
{
  list-style:none;
  margin:0;
  padding:0;
  }
li
{
  background-color:#6E6E6E;
  float:left;
  color:White;
  padding:5px;
  margin-right:3px;
  border: 1px solid white;
  }
.tabin
{
  border:1px solid #6E6E6E;
  }
#firstDiv div
{
  clear:left;
  background-color:#6E6E6E;
  width:200px;
  height:100px;
  display:none;
  }
#firstDiv .contentin
{
  display:block;
  }

tab.js

/// <reference path="jquery-1.9.1.min.js" /> 

$(document).ready(function () { 

  var setTimeouId; 

  $("#firstDiv li").each(function (index) {
    $(this).mouseover(function () {
      var nodeTabin = $(this);
      setTimeouId = setTimeout(function () {
        $("#firstDiv .contentin").removeClass("contentin");
        $("#firstDiv .tabin").removeClass("tabin"); 

        $("#firstDiv div").eq(index).addClass("contentin");
        //我在这里犯错了哦，不应该再用this this如果用在这里的话那么是指的window
        nodeTabin.addClass("tabin");
      }, 300);
    }).mouseout(function () {
      clearTimeout(setTimeouId);
    });
  });
});

我们最终实现的效果如图所示：

当单击标签一的时候，下面加载的是一个html的全部内容；当单击标签二的时候，下面加载的是一个asp.net页面的一部分内容，标签三未添加效果。
页面前台的代码如图：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="tab.aspx.cs" Inherits="tab" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <link href="css/tab.css" rel="stylesheet" type="text/css" />
  <script src="js/jquery.js" type="text/javascript"></script>
  <script src="js/tab.js" type="text/javascript"></script>
</head>
<body>
  <form id="form1" runat="server">
  <div id="firstDiv">
    <ul>
      <li class="tabin">标签一</li>
      <li>标签二</li>
      <li>标签三</li>
    </ul>
    <div class="contentin">
      我是标签一的内容</div>
    <div>
      我是标签二的内容</div>
    <div>
      我是标签三的内容</div>
  </div>
  <br />
  <br />
  <br />
  <div id="secondDiv">
    <ul>
      <li class="tabin">标签一</li>
      <li>标签二</li>
      <li>标签三</li>
    </ul>
    <div id="secondContentin">
      <img alt="装载中" src="images/img-loading.gif" />
      <div id="realContentin"></div>
    </div>
  </div>
  </form>
</body>
</html>

tab.css

ul,li
{
  list-style:none;
  margin:0;
  padding:0;
  }
#firstDiv li
{
  background-color:#6E6E6E;
  float:left;
  color:White;
  padding:5px;
  margin-right:3px;
  border: 1px solid white;
  }
#firstDiv .tabin
{
  border:1px solid #6E6E6E;
  }
#firstDiv div
{
  clear:left;
  background-color:#6E6E6E;
  width:200px;
  height:100px;
  display:none;
  }
#firstDiv .contentin
{
  display:block;
  } 

#secondDiv li
{
  float:left;
  color:Blue;
  background-color:White;
  padding:5px;
  margin-right:3px;
  /*当鼠标放在标签上时，显示成小手*/
  cursor:pointer;
  }
#secondDiv li.tabin
{
  background-color:#F2F6F8;
  border:1px solid black;
  border-bottom:0;
  /*只有position设置成relative或者absolute的时候z-index才有效*/
  position:relative;
  z-index:100;
  }
#secondContentin
{
  width:300px;
  height:200px;
  padding:10px;
  background-color:#F2F6F8;
  clear:left;
  border:1px solid black;
  /*下面是让底下的内容向上移动一个像素
  *但是，我们可以看到，并没有达到我们想要的效果，接下
  *来要上上面的li显示层次在最上面，这样就盖住了下面的div的border
  */
  position:relative;
  top:-1px;
  }
/*开始的时候让loading图片隐藏*/
img
{
  display:none;
  }

关于z-index的问题，注释上有说明，下面的截图是我截的js手册上的内容：

tab.js

/// <reference path="jquery.js" /> 

$(document).ready(function () { 

  var setTimeouId; 

  $("#firstDiv li").each(function (index) {
    $(this).mouseover(function () {
      var nodeTabin = $(this);
      setTimeouId = setTimeout(function () {
        $("#firstDiv .contentin").removeClass("contentin");
        $("#firstDiv .tabin").removeClass("tabin"); 

        $("#firstDiv div").eq(index).addClass("contentin");
        //我在这里犯错了哦，不应该再用this this如果用在这里的话那么是指的window
        nodeTabin.addClass("tabin");
      }, 300);
    }).mouseout(function () {
      clearTimeout(setTimeouId);
    });
  }); 

  $("#realContentin").load("HTMLPage.htm");
  $("#secondDiv li").each(function (index) {
    $(this).click(function () {
      /*更改样式*/
      $("#secondDiv li.tabin").removeClass("tabin");
      $(this).addClass("tabin"); 

      if (index == 0) {
        $("#realContentin").load("HTMLPage.htm");
      } else if (index == 1) {
        $("#realContentin").load("Default.aspx div");
      } else if (index == 2) { 

      }
    });
  }); 

  //我刚开始的时候用的是jquery的最新版本，但是出现了无法绑定的问题。
  $("#secondContentin img").bind("ajaxStart", function () {
    $(this).show();
  }).bind("ajaxStop", function () {
    //setTimeout(function(){$(this).hide()},300);
    $(this).hide(1000);
  });
});

在这里，我想提一下，就是我开始的时候，用的是jquery-1.9.1.min.js，但是在绑定ajax事件的时候，无法绑定，可以绑定click事件。
所以，我建议大家不要用最新版的jquery，避免出现一些莫名其妙的问题。
以上两种标签页效果，希望小编整理的这篇文章可以帮助到大家。

jquery tab标签页的制作

这里有一个内容要特别注意的那就是给标签的mouseover事件设置延迟,这样防止用户恶意的移动鼠标导致放送大量的请求而是服务器崩溃,用到setTimeout函数,主要用到已下的事件 1 $().each(function(){}) 这个是个非常重要的遍历所有标签的好办法 2 mouseover事件, 还有就是关键的css样式编写,控制显示的样式, 复制代码代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN&
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡

Tabs 标签页/选项卡用$.fn.tabs.defaults重写defaults. 依赖 panel linkbutton 用法示例创建tabs 1. 经由标记创建Tabs 从标记创建Tabs更容易,我们不需要写任何JavaScript代码.记住把 'easyui-tabs' 类添加到<div/>标记,每个tab panel 经由子<div/>标记被创建,其用法与Panel一样. 复制代码代码如下: <div id="tt" class="
js与jquery分别实现tab标签页功能的方法

本文实例讲述了js与jquery分别实现tab标签页功能的方法.分享给大家供大家参考,具体如下: 首先列出样式和html标签 <style type="text/css"> *{margin: 0;padding: 0;} #myul li {list-style: none; float: left; border: 1px solid #ddd; width: 100px; height: 20px; text-align: center; line-height: 2
jQuery实现简单的tab标签页效果

本文实例讲述了jQuery实现简单的tab标签页效果.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab1</title> <style type="text/css"> *{ padding: 0; margin: 0;} li{ l
jQuery实现标签页效果实战（4）

今天我们来完成<jQuery实战>系列的标签页效果.先来看一看效果图这里有两部分的内容,上面是一个标签页的效果,下面也是一个标签页的效果.在实际应用中也经常会见到标签页的效果,它的作用主要是在页面可视区有限的情况下展示更多的内容.当用户想看其他内容的时候不需要离开页面,只需要把鼠标移动到某一个标签上就可以看到这个标签里面所对应的内容.门户网站的首页,有很多频道都是标签页的最佳案例,如体育.财经.军事等模块都是位于不同的标签上.上边的标签页一般称为滑动门技术,下面的内容是一次性加载进来,鼠标移
jQuery EasyUI 布局之动态添加tabs标签页

在没看下文之前先给大家简单介绍easyui相关知识. easyui是一种基于jQuery的用户界面插件集合.ddd easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能. 使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面. easyui是个完美支持HTML5网页的完整框架. easyui节省您网页开发的时间和规模. easyui很简单但功能强大的. 通过使用 jQuery EasyUI 可以很容易地添加 Tabs.您只需要调用
基于jQuery实现多标签页切换的效果(web前端开发)

这里,实现多标签页效果的方法有两个,一个是基于DOM的,另一个是基于jquery的,此次我写的是一个对于一个电话套餐的不同,显示不同的标签页方法一: 首先,我们要把页面的大体框架和样式写出来,html和css代码如下: <ul id="tab"> <li id="tab1" onclick="show(1)">10元套餐</li> <li id="tab2" onclick=&quo
JQuery标签页效果实例详解

本文实例讲述了JQuery标签页效果实现方法.分享给大家供大家参考,具体如下: 第一个标签页中鼠标滑过显示不同的标签页,第二个标签页中点击不同标签加载其他页面中的内容,加载等待的图片缓慢隐藏,效果图如下: /WebRoot/4.Tab.html: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> &l
一个js随机颜色脚本（用于标签页面，也可用于任何页面）

看见有人要这个东西,发上来.237个字节的东西.很小吧? 把下面代码添加到tag.asp的<div id="mainContent-bottomimg">前面即可. 这么简单的问题就别问什么问题了. 其实你也可以添加到header.asp或footer.asp中.不过这样你整个页面的全部span区域将全为随机颜色了. 演示 http://www.hljsh.com/tag.asp 效果是一样的.不过我的演示是用asp实现的.我发的是用JS实现的.效果一样. 复制代码代码如
JS实现标签页效果(配合css)

实现的效果: 如上图所示为制作的标签页,我们想要实现的效果是当鼠标移到某一个标签的时候,在下面的内容区显示对应的内容,并且相应标签的颜色需要改变,如图中所示当前鼠标的位置在"标签1"上,则内容区域显示的内容为"我是内容1",并且"标签1"的颜色要比"标签2"和"标签3"深一些,同样鼠标移到"标签2"和"标签3"的时候显示"我是内容2"和"

JQuery标签页效果的两个实例讲解（4）

相关推荐

随机推荐