快捷導(dǎo)航

JQuery標(biāo)簽頁(yè)效果的兩個(gè)實(shí)例講解（4）

更新時(shí)間：2015年09月17日 15:27:44 投稿：lijiao

本文跟大家分享了兩個(gè)Jquery標(biāo)簽頁(yè)效果，各有各的特色，希望大家都會(huì)喜歡，并且能夠熟練掌握，感興趣的小伙伴們可以參考一下

按照慣例，我們還是先來(lái)看一下最終要達(dá)到效果圖：

和上一個(gè)菜單效果類(lèi)似，當(dāng)鼠標(biāo)移動(dòng)到標(biāo)簽上的時(shí)候，下面會(huì)顯示相應(yīng)的內(nèi)容。當(dāng)然，同樣存在滑動(dòng)門(mén)的問(wèn)題。
前臺(tái)頁(yè)面的代碼：

<%@ 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">標(biāo)簽一</li> 
      <li>標(biāo)簽二</li> 
      <li>標(biāo)簽三</li> 
    </ul> 
    <div class="contentin"> 
      我是標(biāo)簽一的內(nèi)容</div> 
    <div> 
      我是標(biāo)簽二的內(nèi)容</div> 
    <div> 
      我是標(biāo)簽三的內(nèi)容</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"); 
        //我在這里犯錯(cuò)了哦，不應(yīng)該再用this this如果用在這里的話(huà)那么是指的window 
        nodeTabin.addClass("tabin"); 
      }, 300); 
    }).mouseout(function () { 
      clearTimeout(setTimeouId); 
    }); 
  }); 
});

我們最終實(shí)現(xiàn)的效果如圖所示：

當(dāng)單擊標(biāo)簽一的時(shí)候，下面加載的是一個(gè)html的全部?jī)?nèi)容；當(dāng)單擊標(biāo)簽二的時(shí)候，下面加載的是一個(gè)asp.net頁(yè)面的一部分內(nèi)容，標(biāo)簽三未添加效果。
頁(yè)面前臺(tái)的代碼如圖：

<%@ 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">標(biāo)簽一</li> 
      <li>標(biāo)簽二</li> 
      <li>標(biāo)簽三</li> 
    </ul> 
    <div class="contentin"> 
      我是標(biāo)簽一的內(nèi)容</div> 
    <div> 
      我是標(biāo)簽二的內(nèi)容</div> 
    <div> 
      我是標(biāo)簽三的內(nèi)容</div> 
  </div> 
  <br /> 
  <br /> 
  <br /> 
  <div id="secondDiv"> 
    <ul> 
      <li class="tabin">標(biāo)簽一</li> 
      <li>標(biāo)簽二</li> 
      <li>標(biāo)簽三</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; 
  /*當(dāng)鼠標(biāo)放在標(biāo)簽上時(shí)，顯示成小手*/ 
  cursor:pointer; 
  } 
#secondDiv li.tabin 
{ 
  background-color:#F2F6F8; 
  border:1px solid black; 
  border-bottom:0; 
  /*只有position設(shè)置成relative或者absolute的時(shí)候z-index才有效*/ 
  position:relative; 
  z-index:100; 
  } 
#secondContentin 
{ 
  width:300px; 
  height:200px; 
  padding:10px; 
  background-color:#F2F6F8; 
  clear:left; 
  border:1px solid black; 
  /*下面是讓底下的內(nèi)容向上移動(dòng)一個(gè)像素 
  *但是，我們可以看到，并沒(méi)有達(dá)到我們想要的效果，接下 
  *來(lái)要上上面的li顯示層次在最上面，這樣就蓋住了下面的div的border 
  */ 
  position:relative; 
  top:-1px; 
  } 
/*開(kāi)始的時(shí)候讓loading圖片隱藏*/ 
img 
{ 
  display:none; 
  }

關(guān)于z-index的問(wèn)題，注釋上有說(shuō)明，下面的截圖是我截的js手冊(cè)上的內(nèi)容：

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"); 
        //我在這里犯錯(cuò)了哦，不應(yīng)該再用this this如果用在這里的話(huà)那么是指的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) { 
 
      } 
    }); 
  }); 
 
  //我剛開(kāi)始的時(shí)候用的是jquery的最新版本，但是出現(xiàn)了無(wú)法綁定的問(wèn)題。 
  $("#secondContentin img").bind("ajaxStart", function () { 
    $(this).show(); 
  }).bind("ajaxStop", function () { 
    //setTimeout(function(){$(this).hide()},300); 
    $(this).hide(1000); 
  }); 
});

在這里，我想提一下，就是我開(kāi)始的時(shí)候，用的是jquery-1.9.1.min.js，但是在綁定ajax事件的時(shí)候，無(wú)法綁定，可以綁定click事件。
所以，我建議大家不要用最新版的jquery，避免出現(xiàn)一些莫名其妙的問(wèn)題。
以上兩種標(biāo)簽頁(yè)效果，希望小編整理的這篇文章可以幫助到大家。

您可能感興趣的文章: