JQuery標簽頁效果實例詳解
本文實例講述了JQuery標簽頁效果實現(xiàn)方法。分享給大家供大家參考，具體如下：
第一個標簽頁中鼠標滑過顯示不同的標簽頁，第二個標簽頁中點擊不同標簽加載其他頁面中的內(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：標簽頁效果</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">標簽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="images/img-loading.gif" /> <div id="realcontent"></div> </div> </body> </html>
/WebRoot/js/tab.js：
var timoutid;
$(document).ready(function(){
//找到所有的標簽
/*
$("li").mouseover(function(){
//將原來顯示的內(nèi)容區(qū)域進行隱藏
$("div.contentin").hide();
//當前標簽所對應(yīng)的內(nèi)容區(qū)域顯示出來
});
*/
$("#tabfirst li").each(function(index){
//每一個包裝li的jquery對象都會執(zhí)行function中的代碼
//index是當前執(zhí)行這個function代碼的li對應(yīng)在所有l(wèi)i組成的數(shù)組中的索引值
//有了index的值之后，就可以找到當前標簽對應(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");
//當前標簽所對應(yīng)的內(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("TabLoad.html");
//找到標簽2效果對應(yīng)的三個標簽，注冊鼠標點擊事件
$("#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.一組標簽用一個ul來管理，每一個標簽是ul中的一個li；標簽下面的內(nèi)容就是用div來管理
2.跟在浮動元素（float）之后的元素會圍繞著浮動元素，如果不希望有這種圍繞，可以在浮動元素之后的那個元素上定義clear屬性，來清除這種效果。
3.實現(xiàn)當前標簽和內(nèi)容區(qū)域的融合，可以通過使用相同的背景色，外加當前標簽使用同顏色的邊框來實現(xiàn)。
4.JQuery中的mouseover，mouseout方法對應(yīng)標準javascript的onmouseover，onmouseout事件，可以處理鼠標進入和離開的事件。
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屬性可以控制元素上的鼠標樣式，pointer的屬性值表示手型樣式，也就是我們常見的鏈接鼠標樣式
12.position屬性可以控制元素定位的方式，值為relative時表示相對原來的位置進行定位?？梢酝ㄟ^設(shè)定top，left，bottom，right的值來
控制元素相對原來的位置進行移動
13.z-index可以控制元素在頁面中的層高，值越大就會在頁面的層越靠前，也就會覆蓋住一些z-index值較低的元素。只有position的值為relative或absolute的元素，z-index才會生效。
14.JQuery中的load方法十分強大，可以把一個指定的靜態(tài)，動態(tài)頁面或服務(wù)器端程序輸出的數(shù)據(jù)裝入到執(zhí)行l(wèi)oad方法的JQuery對象包裝著的元素中。
15.load方法還支持部分裝載，在裝入的頁面地址后面加空格，然后使用選擇器，就可以把頁面中符合選擇器的部分裝入進來。
16.被load的頁面一定要是UTF-8編碼的，否則裝入后中文會出現(xiàn)亂碼。
17.bind可以用于給指定的節(jié)點綁定Javascript的事件或JQuery中定義的事件。對于JQuery中沒有直接提供注冊方法的事件，可以用這種方式注冊。方法的第二個參數(shù)可以是事件執(zhí)行的方法定義。
18.ajaxStart，ajaxStop對應(yīng)ajax交互開始前和結(jié)束后的事件，給某一個節(jié)點注冊了這兩個事件后，當前頁面的ajax交互開始前和結(jié)束后，就會執(zhí)行指定的方法。
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
jQuery 1.9.1源碼分析系列（十）事件系統(tǒng)之主動觸發(fā)事件和模擬冒泡處理
這篇文章主要介紹了jQuery 1.9.1源碼分析系列（十）事件系統(tǒng)之主動觸發(fā)事件和模擬冒泡處理的相關(guān)資料,需要的朋友可以參考下2015-11-11
這篇文章主要介紹了jquery實現(xiàn)多條件篩選特效，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
jQuery源碼解讀之a(chǎn)ddClass()方法分析
這篇文章主要介紹了jQuery源碼解讀之a(chǎn)ddClass()方法,注釋形式較為詳細的分析了addClass()方法的實現(xiàn)技巧與相關(guān)注意事項,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
jQuery刪除/清空指定元素的所有子節(jié)點實例代碼
這篇文章主要給大家介紹了關(guān)于jQuery刪除/清空指定元素的所有子節(jié)點，文中通過示例代碼介紹的非常詳細，對大家學(xué)習或者使用jQuery具有一定的參考學(xué)習價值，需要的朋友們下面來一起學(xué)習學(xué)習吧2019-07-07
正好項目中準備使用thickbox，于是干脆拋棄prototype.js，看起jquery.js了。JQuery確實不錯，體積比Prototype小了許多，而且使用起來更方便更靈活。有人說Prototype像JAVA，正統(tǒng)；而JQuery像Ruby，靈活，更趨于OOP。2009-10-10
jQuery實現(xiàn)仿Alipay支付寶首頁全屏焦點圖切換特效
這篇文章主要介紹了jQuery實現(xiàn)仿Alipay支付寶首頁全屏焦點圖切換特效,涉及jQuery插件jquery.kinMaxShow的相關(guān)使用技巧,非常具有實用價值,需要的朋友可以參考下2015-05-05
在此之前對于Microsoft Ajax的Sys和Jquery的$符號一直很好奇， 不明白為什么輸入一個'$()'就可以實現(xiàn)選擇器？2009-12-12![JQuery 無廢話系列教程(一) jquery入門 [推薦]](http://img.jbzj.com/images/xgimg/bcimg7.png)
JQuery 無廢話系列教程(一) jquery入門 [推薦]
貝殼(就是本文作者了)也屬于剛剛會用點JQuery的那一類型, 在學(xué)習過程中也遇到挺多問題,特別是在開始入門的時候.一直準備寫些有關(guān)JQuery的文章,但又恐自己文筆及表達能力有限而"誤人子弟",最終還是鼓起勇氣. 如在文章中有錯誤或者不合適的理解望廣大朋友直接指出批評.2009-06-06
本篇文章主要介紹了jQuery控制元素隱藏和顯示的相關(guān)知識，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
jquery中郵箱地址 URL網(wǎng)站地址正則驗證實例代碼
QQ網(wǎng)站有一個網(wǎng)站舉報的功能，看了一些js代碼覺得寫得很不錯，我就拿下來了，下面是一個email驗證與url網(wǎng)址驗證js代碼，分享給大家2013-09-09