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

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

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

<%@ 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标签页
， jquery标签页插件
， jquery贴标签效果
jquerytab标签页
jquery实例讲解、pore5.0实例讲解、plc编程实例讲解、python脚本实例讲解、实例讲解，以便于您获取更多的相关知识。