腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

軟件下載

android MAC 驅(qū)動(dòng)下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語(yǔ)言 Delphi Android

網(wǎng)絡(luò)編程

PHP ASP.NET ASP JavaScript

在線工具

CSS格式化 JS格式化 Html轉(zhuǎn)化為Js

數(shù)據(jù)庫(kù)

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國(guó)CMS WordPress

常用工具

PHP開(kāi)發(fā)工具 python Photoshop 必備軟件

JQuery標(biāo)簽頁(yè)效果實(shí)例詳解

更新時(shí)間：2015年12月24日 09:55:09 作者：cui_angel

這篇文章主要介紹了JQuery標(biāo)簽頁(yè)效果,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)遍歷及切換標(biāo)簽頁(yè)的技巧,需要的朋友可以參考下

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

第一個(gè)標(biāo)簽頁(yè)中鼠標(biāo)滑過(guò)顯示不同的標(biāo)簽頁(yè)，第二個(gè)標(biāo)簽頁(yè)中點(diǎn)擊不同標(biāo)簽加載其他頁(yè)面中的內(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)簽頁(yè)效果</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">裝入完整頁(yè)面</li>
 <li>裝入部分頁(yè)面</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(){
 //將原來(lái)顯示的內(nèi)容區(qū)域進(jìn)行隱藏
 $("div.contentin").hide();
 //當(dāng)前標(biāo)簽所對(duì)應(yīng)的內(nèi)容區(qū)域顯示出來(lái)
 });
 */
 $("#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(){
 //將原來(lái)顯示的內(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ū)域顯示出來(lái)
 //$("div").eq(index).addClass("contentin");
 $("div.contentfirst:eq(" + index + ")").addClass("contentin");
 liNode.addClass("tabin"); 
 },300); 
 }).mouseout(function(){
 clearTimeout(timoutid); 
 });
 });
 //在整個(gè)頁(yè)面裝入完成后，標(biāo)簽效果2的內(nèi)容區(qū)域需要裝入靜態(tài)的html頁(yè)面內(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)完成頁(yè)面
 $("#realcontent").load("TabLoad.html");
 } else if (index == 1) {
 //裝入動(dòng)態(tài)部分頁(yè)面
 $("#realcontent").load("TabLoad.jsph2");
 } else if (index == 2) {
 //裝入遠(yuǎn)程數(shù)據(jù)（這里也是一個(gè)動(dòng)態(tài)頁(yè)面輸出的數(shù)據(jù)）
 //$("#realcontent").load("TabData.jsp");
 $("#realcontent").load("TabLoad.jsp");
 }
 });
 });
 //對(duì)于loading圖片綁定ajax請(qǐng)求開(kāi)始和交互結(jié)束的事件
 $("#contentsecond img").bind("ajaxStart",function(){
 //把div里面的內(nèi)容清空
 $("#realcontent").html("");
 //整個(gè)頁(yè)面中任意ajax交互開(kāi)始前，function中的內(nèi)容會(huì)被執(zhí)行
 $(this).show();
 }).bind("ajaxStop",function(){
 //整個(gè)頁(yè)面中任意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)頁(yè)面</title>
</head>
<body>
 載入靜態(tài)頁(yè)面的內(nèi)容。<br>
 載入靜態(tài)頁(yè)面的內(nèi)容。<br>
 載入靜態(tài)頁(yè)面的內(nèi)容。<br>
 載入靜態(tài)頁(yè)面的內(nèi)容。<br>
 載入靜態(tài)頁(yè)面的內(nèi)容。<br>
 載入靜態(tài)頁(yè)面的內(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)頁(yè)面</title>
</head>
<body>
 <h2>
 <%=new Date() %><br>
 1.這是一個(gè)動(dòng)態(tài)頁(yè)面的一部分<br>
 2.這是一個(gè)動(dòng)態(tài)頁(yè)面的一部分<br>
 3.這是一個(gè)動(dòng)態(tài)頁(yè)面的一部分<br>
 </h2>
 這部分不顯示<br>
</body>
</html>

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

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

2.跟在浮動(dòng)元素（float）之后的元素會(huì)圍繞著浮動(dòng)元素，如果不希望有這種圍繞，可以在浮動(dòng)元素之后的那個(gè)元素上定義clear屬性，來(lái)清除這種效果。

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

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

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)試通過(guò)，然后再到其他瀏覽器中進(jìn)行檢查，并修正可能的兼容性問(wèn)題。

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

12.position屬性可以控制元素定位的方式，值為relative時(shí)表示相對(duì)原來(lái)的位置進(jìn)行定位?？梢酝ㄟ^(guò)設(shè)定top，left，bottom，right的值來(lái)
控制元素相對(duì)原來(lái)的位置進(jìn)行移動(dòng)

13.z-index可以控制元素在頁(yè)面中的層高，值越大就會(huì)在頁(yè)面的層越靠前，也就會(huì)覆蓋住一些z-index值較低的元素。只有position的值為relative或absolute的元素，z-index才會(huì)生效。

14.JQuery中的load方法十分強(qiáng)大，可以把一個(gè)指定的靜態(tài)，動(dòng)態(tài)頁(yè)面或服務(wù)器端程序輸出的數(shù)據(jù)裝入到執(zhí)行l(wèi)oad方法的JQuery對(duì)象包裝著的元素中。

15.load方法還支持部分裝載，在裝入的頁(yè)面地址后面加空格，然后使用選擇器，就可以把頁(yè)面中符合選擇器的部分裝入進(jìn)來(lái)。

16.被load的頁(yè)面一定要是UTF-8編碼的，否則裝入后中文會(huì)出現(xiàn)亂碼。

17.bind可以用于給指定的節(jié)點(diǎn)綁定Javascript的事件或JQuery中定義的事件。對(duì)于JQuery中沒(méi)有直接提供注冊(cè)方法的事件，可以用這種方式注冊(cè)。方法的第二個(gè)參數(shù)可以是事件執(zhí)行的方法定義。

18.ajaxStart，ajaxStop對(duì)應(yīng)ajax交互開(kāi)始前和結(jié)束后的事件，給某一個(gè)節(jié)點(diǎn)注冊(cè)了這兩個(gè)事件后，當(dāng)前頁(yè)面的ajax交互開(kāi)始前和結(jié)束后，就會(huì)執(zhí)行指定的方法。

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: