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

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

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

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

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

///  
 
$(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" %> 
 
 
 
 
   
   
   
   
 
 
   
 
 

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; 
  z-index:100; 
  } 
#secondContentin 
{ 
  width:300px; 
  height:200px; 
  padding:10px; 
  background-color:#F2F6F8; 
  clear:left; 
  border:1px solid black; 
   
  position:relative; 
  top:-1px; 
  } 
 
img 
{ 
  display:none; 
  } 

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

tab.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，避免出现一些莫名其妙的问题。 
以上两种标签页效果，希望小编整理的这篇文章可以帮助到大家。