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

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

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

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

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

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

<body> 
  <ul id="tabfirst">
    <li class="tabin">標簽1</li>
    <li>標簽2</li>
    <li>標簽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>

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

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

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

下面的標簽頁思路一樣，真?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">標簽1</li>
    <li>標簽2</li>
    <li>標簽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>從遠程獲取數(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是當前執(zhí)行這個function代碼的li對應在所有l(wèi)i組成的數(shù)組中的索引值
    //有了index的值之后，就可以找到當前標簽對應的內(nèi)容區(qū)域
    $(this).mouseover(function(){ 
      var liNode = $(this);
      timoutid = setTimeout(function(){
        //將原來顯示的內(nèi)容區(qū)域進行隱藏
        $("div.contentin").removeClass("contentin");
        //對有tabin的class定義的li清除tabin的class
        $("#tabfirst li.tabin").removeClass("tabin");
        //當前標簽所對應的內(nèi)容區(qū)域顯示出來
        //$("div").eq(index).addClass("contentin");
        $("div.contentfirst:eq(" + index + ")").addClass("contentin");
        liNode.addClass("tabin");  
      },300);     
    }).mouseout(function(){
      clearTimeout(timoutid); 
    });
  });

  //在整個頁面裝入完成后，標簽效果2的內(nèi)容區(qū)域需要裝入靜態(tài)的html頁面內(nèi)容
  $("#realcontent").load("../jsp/tabLoad.html");
  //找到標簽2效果對應的三個標簽，注冊鼠標點擊事件
  $("#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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

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

您可能感興趣的文章: