JQuery標(biāo)簽頁效果實(shí)例詳解
本文實(shí)例講述了JQuery標(biāo)簽頁效果實(shí)現(xiàn)方法。分享給大家供大家參考,具體如下:
第一個(gè)標(biāo)簽頁中鼠標(biāo)滑過顯示不同的標(biāo)簽頁,第二個(gè)標(biāo)簽頁中點(diǎn)擊不同標(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實(shí)例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>從遠(yuǎn)程獲取數(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ū)域進(jìn)行隱藏 $("div.contentin").hide(); //當(dāng)前標(biāo)簽所對(duì)應(yīng)的內(nèi)容區(qū)域顯示出來 }); */ $("#tabfirst li").each(function(index){ //每一個(gè)包裝li的jquery對(duì)象都會(huì)執(zhí)行function中的代碼 //index是當(dāng)前執(zhí)行這個(gè)function代碼的li對(duì)應(yīng)在所有l(wèi)i組成的數(shù)組中的索引值 //有了index的值之后,就可以找到當(dāng)前標(biāo)簽對(duì)應(yīng)的內(nèi)容區(qū)域 $(this).mouseover(function(){ var liNode = $(this); timoutid = setTimeout(function(){ //將原來顯示的內(nèi)容區(qū)域進(jìn)行隱藏 $("div.contentin").removeClass("contentin"); //對(duì)有tabin的class定義的li清除tabin的class $("#tabfirst li.tabin").removeClass("tabin"); //當(dāng)前標(biāo)簽所對(duì)應(yīng)的內(nèi)容區(qū)域顯示出來 //$("div").eq(index).addClass("contentin"); $("div.contentfirst:eq(" + index + ")").addClass("contentin"); liNode.addClass("tabin"); },300); }).mouseout(function(){ clearTimeout(timoutid); }); }); //在整個(gè)頁面裝入完成后,標(biāo)簽效果2的內(nèi)容區(qū)域需要裝入靜態(tài)的html頁面內(nèi)容 $("#realcontent").load("TabLoad.html"); //找到標(biāo)簽2效果對(duì)應(yīng)的三個(gè)標(biāo)簽,注冊(cè)鼠標(biāo)點(diǎn)擊事件 $("#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) { //裝入動(dòng)態(tài)部分頁面 $("#realcontent").load("TabLoad.jsph2"); } else if (index == 2) { //裝入遠(yuǎn)程數(shù)據(jù)(這里也是一個(gè)動(dòng)態(tài)頁面輸出的數(shù)據(jù)) //$("#realcontent").load("TabData.jsp"); $("#realcontent").load("TabLoad.jsp"); } }); }); //對(duì)于loading圖片綁定ajax請(qǐng)求開始和交互結(jié)束的事件 $("#contentsecond img").bind("ajaxStart",function(){ //把div里面的內(nèi)容清空 $("#realcontent").html(""); //整個(gè)頁面中任意ajax交互開始前,function中的內(nèi)容會(huì)被執(zhí)行 $(this).show(); }).bind("ajaxStop",function(){ //整個(gè)頁面中任意ajax交互結(jié)束后,function中的內(nèi)容會(huì)被執(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>這是一個(gè)靜態(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>動(dòng)態(tài)頁面</title> </head> <body> <h2> <%=new Date() %><br> 1.這是一個(gè)動(dòng)態(tài)頁面的一部分<br> 2.這是一個(gè)動(dòng)態(tài)頁面的一部分<br> 3.這是一個(gè)動(dòng)態(tài)頁面的一部分<br> </h2> 這部分不顯示<br> </body> </html>
本節(jié)學(xué)到的JQuery及其他開發(fā)知識(shí):
1.一組標(biāo)簽用一個(gè)ul來管理,每一個(gè)標(biāo)簽是ul中的一個(gè)li;標(biāo)簽下面的內(nèi)容就是用div來管理
2.跟在浮動(dòng)元素(float)之后的元素會(huì)圍繞著浮動(dòng)元素,如果不希望有這種圍繞,可以在浮動(dòng)元素之后的那個(gè)元素上定義clear屬性,來清除這種效果。
3.實(shí)現(xiàn)當(dāng)前標(biāo)簽和內(nèi)容區(qū)域的融合,可以通過使用相同的背景色,外加當(dāng)前標(biāo)簽使用同顏色的邊框來實(shí)現(xiàn)。
4.JQuery中的mouseover,mouseout方法對(duì)應(yīng)標(biāo)準(zhǔn)javascript的onmouseover,onmouseout事件,可以處理鼠標(biāo)進(jìn)入和離開的事件。
5.在一個(gè)包含了多個(gè)元素的JQuery對(duì)象上執(zhí)行each方法,可以注冊(cè)給each方法的那個(gè)function的內(nèi)容被每一個(gè)元素執(zhí)行。同時(shí)這個(gè)function還可以接收到一個(gè)參數(shù),表示這個(gè)元素的索引值。 JQuery中的很多方法也用到了each
6.eq方法可以根據(jù)索引值只得到JQuery對(duì)象中包含的多個(gè)元素中的某一個(gè)元素,并仍然返回元素對(duì)應(yīng)的新JQuery對(duì)象。
7.選擇器中使用eq,例如$(“div:eq(1)”)
8.addClass和removeClass方法用于添加和移除元素的class定義。
9.Javascript中的setTimeout方法可以延時(shí)執(zhí)行某些代碼,對(duì)應(yīng)的clearTimeout可以清除設(shè)定的延時(shí)操作。
10.做一個(gè)AJAX應(yīng)用的時(shí)候,可以考慮現(xiàn)在FireFox上調(diào)試通過,然后再到其他瀏覽器中進(jìn)行檢查,并修正可能的兼容性問題。
11.cursor屬性可以控制元素上的鼠標(biāo)樣式,pointer的屬性值表示手型樣式,也就是我們常見的鏈接鼠標(biāo)樣式
12.position屬性可以控制元素定位的方式,值為relative時(shí)表示相對(duì)原來的位置進(jìn)行定位。可以通過設(shè)定top,left,bottom,right的值來
控制元素相對(duì)原來的位置進(jìn)行移動(dòng)
13.z-index可以控制元素在頁面中的層高,值越大就會(huì)在頁面的層越靠前,也就會(huì)覆蓋住一些z-index值較低的元素。只有position的值為relative或absolute的元素,z-index才會(huì)生效。
14.JQuery中的load方法十分強(qiáng)大,可以把一個(gè)指定的靜態(tài),動(dòng)態(tài)頁面或服務(wù)器端程序輸出的數(shù)據(jù)裝入到執(zhí)行l(wèi)oad方法的JQuery對(duì)象包裝著的元素中。
15.load方法還支持部分裝載,在裝入的頁面地址后面加空格,然后使用選擇器,就可以把頁面中符合選擇器的部分裝入進(jìn)來。
16.被load的頁面一定要是UTF-8編碼的,否則裝入后中文會(huì)出現(xiàn)亂碼。
17.bind可以用于給指定的節(jié)點(diǎn)綁定Javascript的事件或JQuery中定義的事件。對(duì)于JQuery中沒有直接提供注冊(cè)方法的事件,可以用這種方式注冊(cè)。方法的第二個(gè)參數(shù)可以是事件執(zhí)行的方法定義。
18.ajaxStart,ajaxStop對(duì)應(yīng)ajax交互開始前和結(jié)束后的事件,給某一個(gè)節(jié)點(diǎn)注冊(cè)了這兩個(gè)事件后,當(dāng)前頁面的ajax交互開始前和結(jié)束后,就會(huì)執(zhí)行指定的方法。
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jquery tab標(biāo)簽頁的制作
- 基于jQuery實(shí)現(xiàn)多標(biāo)簽頁切換的效果(web前端開發(fā))
- jQuery實(shí)現(xiàn)簡單的tab標(biāo)簽頁效果
- js與jquery分別實(shí)現(xiàn)tab標(biāo)簽頁功能的方法
- jqueryUI tab標(biāo)簽頁代碼分享
- jQuery+css實(shí)現(xiàn)的tab切換標(biāo)簽(兼容各瀏覽器)
- jQuery+CSS實(shí)現(xiàn)滑動(dòng)的標(biāo)簽分欄切換效果
- jQuery+css實(shí)現(xiàn)的換頁標(biāo)簽欄效果
- jQuery+CSS實(shí)現(xiàn)的標(biāo)簽頁效果示例【測試可用】
相關(guān)文章
jQuery 1.9.1源碼分析系列(十)事件系統(tǒng)之主動(dòng)觸發(fā)事件和模擬冒泡處理
這篇文章主要介紹了jQuery 1.9.1源碼分析系列(十)事件系統(tǒng)之主動(dòng)觸發(fā)事件和模擬冒泡處理的相關(guān)資料,需要的朋友可以參考下2015-11-11jquery實(shí)現(xiàn)多條件篩選特效代碼分享
這篇文章主要介紹了jquery實(shí)現(xiàn)多條件篩選特效,推薦給大家,有需要的小伙伴可以參考下。2015-08-08jQuery源碼解讀之a(chǎn)ddClass()方法分析
這篇文章主要介紹了jQuery源碼解讀之a(chǎn)ddClass()方法,注釋形式較為詳細(xì)的分析了addClass()方法的實(shí)現(xiàn)技巧與相關(guān)注意事項(xiàng),具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02jQuery刪除/清空指定元素的所有子節(jié)點(diǎn)實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于jQuery刪除/清空指定元素的所有子節(jié)點(diǎn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用jQuery具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07jQuery實(shí)現(xiàn)仿Alipay支付寶首頁全屏焦點(diǎn)圖切換特效
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿Alipay支付寶首頁全屏焦點(diǎn)圖切換特效,涉及jQuery插件jquery.kinMaxShow的相關(guān)使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05JQuery 無廢話系列教程(一) jquery入門 [推薦]
貝殼(就是本文作者了)也屬于剛剛會(huì)用點(diǎn)JQuery的那一類型, 在學(xué)習(xí)過程中也遇到挺多問題,特別是在開始入門的時(shí)候.一直準(zhǔn)備寫些有關(guān)JQuery的文章,但又恐自己文筆及表達(dá)能力有限而"誤人子弟",最終還是鼓起勇氣. 如在文章中有錯(cuò)誤或者不合適的理解望廣大朋友直接指出批評(píng).2009-06-06jquery中郵箱地址 URL網(wǎng)站地址正則驗(yàn)證實(shí)例代碼
QQ網(wǎng)站有一個(gè)網(wǎng)站舉報(bào)的功能,看了一些js代碼覺得寫得很不錯(cuò),我就拿下來了,下面是一個(gè)email驗(yàn)證與url網(wǎng)址驗(yàn)證js代碼,分享給大家2013-09-09