今天我們來完成《jQuery實戰》系列的標簽頁效果。先來看一看效果圖
這里有兩部分的內容，上面是一個標簽頁的效果，下面也是一個標簽頁的效果。在實際應用中也經常會見到標簽頁的效果，它的作用主要是在頁面可視區有限的情況下展示更多的內容。當用戶想看其他內容的時候不需要離開頁面，只需要把鼠標移動到某一個標簽上就可以看到這個標簽里面所對應的內容。門戶網站的首頁，有很多頻道都是標簽頁的最佳案例，如體育、財經、軍事等模塊都是位于不同的標簽上。上邊的標簽頁一般稱為滑動門技術，下面的內容是一次性加載進來，鼠標移動到某個標簽之后，下面的內容就跟著顯示對應的內容，不需要加載頁面。而下面的標簽頁選用另一種寫法，這是通過其他頁面load進來的，當你滑動到某個標簽的時候，加載對應的頁面。
好了，開始編寫我們的代碼，首先是編寫html頁面”tab.jsp”。
<body> <ul id="tabfirst"> <li class="tabin">標簽1</li> <li>標簽2</li> <li>標簽3</li> </ul> <div class="contentin contentfirst">我是內容1</div> <div class="contentfirst">我是內容2</div> <div class="contentfirst">我是內容3</div> </body>
一般標簽我們都用ul和li來表示，每個li代表一個標簽，里面有三個li,分別是標簽1，標簽2，標簽3，下面內容區域是3個div,這三個div是預先裝載進來的。這時候的基本骨架已經完成，接下來編寫css代碼。
第一步把ul里面的li改造為標簽的效果。回憶上節的課程，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()函數的含義是當鼠標進入li時執行函數里面的代碼。函數里面的代碼先將原來深顏色的li去掉，然后將原來顯示的div隱藏，計算鼠標點中哪一個li賦值在index變量中，最后對應的div顯示和對應的li加深和將對應的div顯示。
下面的標簽頁思路一樣，真個完整的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實戰:tab頁簽</title></head><body> <ul id="tabfirst"> <li class="tabin">標簽1</li> <li>標簽2</li> <li>標簽3</li> </ul> <div class="contentin contentfirst">我是內容1</div> <div class="contentfirst">我是內容2</div> <div class="contentfirst">我是內容3</div> <br /> <br /> <br /> <ul id="tabsecond"> <li class="tabin">裝入完整頁面</li> <li>裝入部分頁面</li> <li>從遠程獲取數據</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對象都會執行function中的代碼 //index是當前執行這個function代碼的li對應在所有li組成的數組中的索引值 //有了index的值之后，就可以找到當前標簽對應的內容區域 $(this).mouseover(function(){ var liNode = $(this); timoutid = setTimeout(function(){ //將原來顯示的內容區域進行隱藏 $("div.contentin").removeClass("contentin"); //對有tabin的class定義的li清除tabin的class $("#tabfirst li.tabin").removeClass("tabin"); //當前標簽所對應的內容區域顯示出來 //$("div").eq(index).addClass("contentin"); $("div.contentfirst:eq(" + index + ")").addClass("contentin"); liNode.addClass("tabin"); },300); }).mouseout(function(){ clearTimeout(timoutid); }); }); //在整個頁面裝入完成后，標簽效果2的內容區域需要裝入靜態的html頁面內容 $("#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請求開始和交互結束的事件 $("#contentsecond img").bind("ajaxStart",function(){ $("#realcontent").html(""); $(this).show(); }).bind("ajaxStop", function(){ $(this).slideUp("1000"); });});代碼參考地址：https://github.com/shizongger/JqueryInAction
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
參考資料：
1. 王興奎《jQuery實戰》
2. w3school
新聞熱點
疑難解答
