JQuery標(biāo)簽頁效果實例詳解

2019-11-20 10:56:45

字體：大中小

供稿：網(wǎng)友

本文實例講述了JQuery標(biāo)簽頁效果實現(xiàn)方法。分享給大家供大家參考，具體如下：

第一個標(biāo)簽頁中鼠標(biāo)滑過顯示不同的標(biāo)簽頁，第二個標(biāo)簽頁中點擊不同標(biāo)簽加載其他頁面中的內(nèi)容，加載等待的圖片緩慢隱藏，效果圖如下：

/WebRoot/4.Tab.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title>JQuery實例4：標(biāo)簽頁效果</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="css/tab.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/tab.js"></script> </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>從遠程獲取數(shù)據(jù)</li> </ul> <div id="contentsecond"> <img alt="裝載中" src="images/img-loading.gif" /> <div id="realcontent"></div> </div> </body></html>

/WebRoot/js/tab.js：

var timoutid;$(document).ready(function(){ //找到所有的標(biāo)簽 /* $("li").mouseover(function(){ //將原來顯示的內(nèi)容區(qū)域進行隱藏 $("div.contentin").hide(); //當(dāng)前標(biāo)簽所對應(yīng)的內(nèi)容區(qū)域顯示出來 }); */ $("#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ū)域進行隱藏 $("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("TabLoad.html"); //找到標(biāo)簽2效果對應(yīng)的三個標(biāo)簽，注冊鼠標(biāo)點擊事件 $("#tabsecond li").each(function(index){ $(this).click(function(){ $("#tabsecond li.tabin").removeClass("tabin"); $(this).addClass("tabin"); if (index == 0) { //裝入靜態(tài)完成頁面 $("#realcontent").load("TabLoad.html"); } else if (index == 1) { //裝入動態(tài)部分頁面 $("#realcontent").load("TabLoad.jsph2"); } else if (index == 2) { //裝入遠程數(shù)據(jù)（這里也是一個動態(tài)頁面輸出的數(shù)據(jù)） //$("#realcontent").load("TabData.jsp"); $("#realcontent").load("TabLoad.jsp"); } }); }); //對于loading圖片綁定ajax請求開始和交互結(jié)束的事件 $("#contentsecond img").bind("ajaxStart",function(){ //把div里面的內(nèi)容清空 $("#realcontent").html(""); //整個頁面中任意ajax交互開始前，function中的內(nèi)容會被執(zhí)行 $(this).show(); }).bind("ajaxStop",function(){ //整個頁面中任意ajax交互結(jié)束后，function中的內(nèi)容會被執(zhí)行  $(this).slideUp(5000); });});

/WebRoot/css/tab.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;}

/WebRoot/TabLoad.html：

<!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"><title>這是一個靜態(tài)頁面</title></head><body> 載入靜態(tài)頁面的內(nèi)容。<br> 載入靜態(tài)頁面的內(nèi)容。<br> 載入靜態(tài)頁面的內(nèi)容。<br> 載入靜態(tài)頁面的內(nèi)容。<br> 載入靜態(tài)頁面的內(nèi)容。<br> 載入靜態(tài)頁面的內(nèi)容。<br></body></html>

/WebRoot/TabLoad.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ page import="java.util.*" %><!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"><title>動態(tài)頁面</title></head><body> <h2> <%=new Date() %><br> 1.這是一個動態(tài)頁面的一部分<br> 2.這是一個動態(tài)頁面的一部分<br> 3.這是一個動態(tài)頁面的一部分<br> </h2> 這部分不顯示<br></body></html>

本節(jié)學(xué)到的JQuery及其他開發(fā)知識：

1.一組標(biāo)簽用一個ul來管理，每一個標(biāo)簽是ul中的一個li；標(biāo)簽下面的內(nèi)容就是用div來管理

2.跟在浮動元素（float）之后的元素會圍繞著浮動元素，如果不希望有這種圍繞，可以在浮動元素之后的那個元素上定義clear屬性，來清除這種效果。

3.實現(xiàn)當(dāng)前標(biāo)簽和內(nèi)容區(qū)域的融合，可以通過使用相同的背景色，外加當(dāng)前標(biāo)簽使用同顏色的邊框來實現(xiàn)。

4.JQuery中的mouseover，mouseout方法對應(yīng)標(biāo)準(zhǔn)javascript的onmouseover，onmouseout事件，可以處理鼠標(biāo)進入和離開的事件。

5.在一個包含了多個元素的JQuery對象上執(zhí)行each方法，可以注冊給each方法的那個function的內(nèi)容被每一個元素執(zhí)行。同時這個function還可以接收到一個參數(shù)，表示這個元素的索引值。 JQuery中的很多方法也用到了each

6.eq方法可以根據(jù)索引值只得到JQuery對象中包含的多個元素中的某一個元素，并仍然返回元素對應(yīng)的新JQuery對象。

7.選擇器中使用eq，例如$(“div:eq(1)”)

8.addClass和removeClass方法用于添加和移除元素的class定義。

9.Javascript中的setTimeout方法可以延時執(zhí)行某些代碼，對應(yīng)的clearTimeout可以清除設(shè)定的延時操作。

10.做一個AJAX應(yīng)用的時候，可以考慮現(xiàn)在FireFox上調(diào)試通過，然后再到其他瀏覽器中進行檢查，并修正可能的兼容性問題。

11.cursor屬性可以控制元素上的鼠標(biāo)樣式，pointer的屬性值表示手型樣式，也就是我們常見的鏈接鼠標(biāo)樣式