快捷導(dǎo)航

jQuery實現(xiàn)標(biāo)簽頁效果實戰(zhàn)（4）

更新時間：2017年02月08日 10:52:17 作者：少年張翠山

這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)標(biāo)簽頁效果的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

今天我們來完成《jQuery實戰(zhàn)》系列的標(biāo)簽頁效果。先來看一看效果圖

這里有兩部分的內(nèi)容，上面是一個標(biāo)簽頁的效果，下面也是一個標(biāo)簽頁的效果。在實際應(yīng)用中也經(jīng)常會見到標(biāo)簽頁的效果，它的作用主要是在頁面可視區(qū)有限的情況下展示更多的內(nèi)容。當(dāng)用戶想看其他內(nèi)容的時候不需要離開頁面，只需要把鼠標(biāo)移動到某一個標(biāo)簽上就可以看到這個標(biāo)簽里面所對應(yīng)的內(nèi)容。門戶網(wǎng)站的首頁，有很多頻道都是標(biāo)簽頁的最佳案例，如體育、財經(jīng)、軍事等模塊都是位于不同的標(biāo)簽上。上邊的標(biāo)簽頁一般稱為滑動門技術(shù)，下面的內(nèi)容是一次性加載進(jìn)來，鼠標(biāo)移動到某個標(biāo)簽之后，下面的內(nèi)容就跟著顯示對應(yīng)的內(nèi)容，不需要加載頁面。而下面的標(biāo)簽頁選用另一種寫法，這是通過其他頁面load進(jìn)來的，當(dāng)你滑動到某個標(biāo)簽的時候，加載對應(yīng)的頁面。

好了，開始編寫我們的代碼，首先是編寫html頁面”tab.jsp”。

<body> 
  <ul id="tabfirst">
    <li class="tabin">標(biāo)簽1</li>
    <li>標(biāo)簽2</li>
    <li>標(biāo)簽3</li>
  </ul>
  <div class="contentin contentfirst">我是內(nèi)容1</div>
  <div class="contentfirst">我是內(nèi)容2</div>
  <div class="contentfirst">我是內(nèi)容3</div>  
</body>

一般標(biāo)簽我們都用ul和li來表示，每個li代表一個標(biāo)簽，里面有三個li,分別是標(biāo)簽1，標(biāo)簽2，標(biāo)簽3，下面內(nèi)容區(qū)域是3個div,這三個div是預(yù)先裝載進(jìn)來的。這時候的基本骨架已經(jīng)完成，接下來編寫css代碼。
第一步把ul里面的li改造為標(biāo)簽的效果?；貞浬瞎?jié)的課程，li默認(rèn)是縱向的效果，我們想把它變成橫向用清楚li的特征，然后讓其float漂移達(dá)到相應(yīng)的效果。

$(document).ready(function() {
  $("#tabfirst li").mouseover(function() {
    //1.將原來深顏色的li去掉
    $(".tabin").removeClass("tabin");
    //2.將原來顯示的div隱藏
    $(".contentin").removeClass("contentin");
    //3.計算鼠標(biāo)點中哪一個li
    var chooseStr = $(this).html();
    var index = 0;
    if("標(biāo)簽1" == chooseStr) {
      index = 0;
    } else if("標(biāo)簽2" == chooseStr) {
      index = 1;
    } else if("標(biāo)簽3" == chooseStr) {
      index = 2;
    }
    //4.將對應(yīng)的div顯示和對應(yīng)的li加深
    $("#tabfirst li:eq("+index+")").addClass("tabin");
    $("div.contentfirst:eq("+index+")").addClass("contentin");
  });
});

這里的mouseover()函數(shù)的含義是當(dāng)鼠標(biāo)進(jìn)入li時執(zhí)行函數(shù)里面的代碼。函數(shù)里面的代碼先將原來深顏色的li去掉，然后將原來顯示的div隱藏，計算鼠標(biāo)點中哪一個li賦值在index變量中，最后對應(yīng)的div顯示和對應(yīng)的li加深和將對應(yīng)的div顯示。

下面的標(biāo)簽頁思路一樣，真?zhèn)€完整的html頁面如下:

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="../css/tab.css" rel="external nofollow" />
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../js/tab.js"></script>
<title>jQuery實戰(zhàn):tab頁簽</title>
</head>
<body> 
  <ul id="tabfirst">
    <li class="tabin">標(biāo)簽1</li>
    <li>標(biāo)簽2</li>
    <li>標(biāo)簽3</li>
  </ul>
  <div class="contentin contentfirst">我是內(nèi)容1</div>
  <div class="contentfirst">我是內(nèi)容2</div>
  <div class="contentfirst">我是內(nèi)容3</div>
  <br />
  <br />
  <br />
  <ul id="tabsecond">
    <li class="tabin">裝入完整頁面</li>
    <li>裝入部分頁面</li>
    <li>從遠(yuǎn)程獲取數(shù)據(jù)</li>
  </ul>
  <div id="contentsecond">
    <img alt="裝載中" src="../image/img-loading.gif" />
    <div id="realcontent"></div>
  </div>
</body>
</html>

css文件如下:

ul,li {
  margin: 0;
  padding: 0;
  list-style: none;
}
#tabfirst li {
  float: left;
  background-color: #868686;
  color: white;
  padding: 5px;
  margin-right: 2px;
  border: 1px solid white;
}
#tabfirst li.tabin {
  background-color: #6E6E6E;
  border: 1px solid #6E6E6E;
}
div.contentfirst {
  clear: left;
  background-color: #6E6E6E;
  color: white;
  width: 300px;
  height: 100px;
  padding: 10px;
  display: none;
}
div.contentin {
  display: block;
}

#tabsecond li {
  float: left;
  background-color: white;
  color: blue;
  padding: 5px;
  margin-right: 2px;
  cursor: pointer;
}
#tabsecond li.tabin {
  background-color: #F2F6FB;
  border: 1px solid black;
  border-bottom: 0;
  z-index: 100;
  position: relative;
}
#contentsecond {
  width: 500px;
  height: 200px;
  padding: 10px;
  background-color: #F2F6FB;
  clear: left;
  border: 1px solid black;
  position: relative;
  top: -1px;
}
img {
  display: none;
}

jQuery代碼如下:

/**
 * tab頁面模塊的js代碼
 */

$(document).ready(function() {
  $("#tabfirst li").each(function(index){
    //每一個包裝li的jquery對象都會執(zhí)行function中的代碼
    //index是當(dāng)前執(zhí)行這個function代碼的li對應(yīng)在所有l(wèi)i組成的數(shù)組中的索引值
    //有了index的值之后，就可以找到當(dāng)前標(biāo)簽對應(yīng)的內(nèi)容區(qū)域
    $(this).mouseover(function(){ 
      var liNode = $(this);
      timoutid = setTimeout(function(){
        //將原來顯示的內(nèi)容區(qū)域進(jìn)行隱藏
        $("div.contentin").removeClass("contentin");
        //對有tabin的class定義的li清除tabin的class
        $("#tabfirst li.tabin").removeClass("tabin");
        //當(dāng)前標(biāo)簽所對應(yīng)的內(nèi)容區(qū)域顯示出來
        //$("div").eq(index).addClass("contentin");
        $("div.contentfirst:eq(" + index + ")").addClass("contentin");
        liNode.addClass("tabin");  
      },300);     
    }).mouseout(function(){
      clearTimeout(timoutid); 
    });
  });

  //在整個頁面裝入完成后，標(biāo)簽效果2的內(nèi)容區(qū)域需要裝入靜態(tài)的html頁面內(nèi)容
  $("#realcontent").load("../jsp/tabLoad.html");
  //找到標(biāo)簽2效果對應(yīng)的三個標(biāo)簽，注冊鼠標(biāo)點擊事件
  $("#tabsecond li").each(function(index){
    $(this).click(function(){
      $("#tabsecond .tabin").removeClass("tabin");
      $(this).addClass("tabin");

      if(0 == index) {
        $("#realcontent").load("../jsp/tabLoad.html");
      } else if(1 == index) {
        $("#realcontent").load("../jsp/tabLoad1.html h2");
      } else if(2 == index) {
        $("#realcontent").load("/JqueryStudy/tabServlet");
      }
    });
  });

  //對于loading圖片綁定ajax請求開始和交互結(jié)束的事件
  $("#contentsecond img").bind("ajaxStart",function(){
    $("#realcontent").html("");
    $(this).show();
  }).bind("ajaxStop", function(){
    $(this).slideUp("1000");
  });
});

代碼參考地址：https://github.com/shizongger/JqueryInAction

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

參考資料：
1. 王興奎《jQuery實戰(zhàn)》
2. w3school

您可能感興趣的文章: