快捷導(dǎo)航

jquery中實(shí)現(xiàn)標(biāo)簽切換效果的代碼

更新時(shí)間：2011年03月01日 23:31:54 作者：

現(xiàn)在比較流行jquery插件，所以既然用了jquery那么就要用好，也不用大量的寫(xiě)代碼了。

核心代碼：

 
$("ul > li").hover(tab); 

function tab() { 
$(this).addClass("ll").siblings().removeClass("ll"); 
var tab = $(this).attr("title"); 
$("#" + tab).show().siblings().hide(); 
}; 

li中和title必須和div中的id一致！
完整的代碼

復(fù)制代碼代碼如下:

 
<script type="text/javascript" src="jquery-132min2.js"></script> 
<script type="text/javascript"> 
$(function() { 
$("ul > li").click(tab); 

function tab() { 
$(this).addClass("ll").siblings().removeClass("ll"); 
var tab = $(this).attr("title"); 
$("#" + tab).show().siblings().hide(); 
}; 
}); 
</script> 
</head> 
<body> 
<ul> 
<li class="ll" title="d1">1</li> 
<li title="d2">2</li> 
<li title="d3">3</li> 
</ul> 
<div> 
<div id="d1">11111</div> 
<div id="d2" style="display:none">22222</div> 
<div id="d3" style="display:none">33333</div> 
</div> 

簡(jiǎn)單的jQuery標(biāo)簽頁(yè)Simple Tabs w（使用CSS及JQuery）
我知道有很多演示指導(dǎo)如何使用CSS及JQuery創(chuàng)建標(biāo)簽頁(yè)，但是我還是決定自己動(dòng)手創(chuàng)建屬于我自己的標(biāo)簽頁(yè)。當(dāng)然我并不知道技術(shù)手法上是否（與別人的）相同，但我希望這個(gè)指導(dǎo)很容易懂，甚至對(duì)于一個(gè)初學(xué)者來(lái)說(shuō)搞懂它并不費(fèi)力。

原文：http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/

對(duì)那些不是很熟悉JQuery的同學(xué)，請(qǐng)看他們的官方網(wǎng)站以獲得一個(gè)大體的概述，同時(shí)你也可以進(jìn)一步探究這些、這些、還有這些等許多關(guān)于JQuery的指導(dǎo)。
Step1. Wireframe – HTML & CSS
Wireframe: a visual representation of the structure of a web page

線框：對(duì)網(wǎng)頁(yè)安排的一種視覺(jué)上的描繪

使用無(wú)序列表（ul）來(lái)呈現(xiàn)你的標(biāo)簽，然后進(jìn)一步將一個(gè)類型（class）為”tab_container”的容器（div）放在它的下方。記住每一個(gè)列表的項(xiàng)（tabs）都有一個(gè)”href”的屬性值和”.tab_content”div的ID名稱一致。這是十分重要的一步！因?yàn)槲覀冇?JQuery實(shí)現(xiàn)（切換標(biāo)簽頁(yè)的）動(dòng)作就要靠它。請(qǐng)記住我為了更容易被你們理解所以使用一般的名稱”tab1″。事實(shí)上，你必須使用關(guān)鍵字，這樣更語(yǔ)義化（semantic），更有益于你的SEO（搜索引擎優(yōu)化）。

HTML

復(fù)制代碼代碼如下:

 
<ul class=”tabs”> 
<li><a href=”#tab1″>Gallery</a></li> 
<li><a href=”#tab2″>Submit</a></li> 
</ul> 

<div class=”tab_container”> 
<div id=”tab1″ class=”tab_content”> 
<!–Content–> 
</div> 
<div id=”tab2″ class=”tab_content”> 
<!–Content–> 
</div> 
</div> 

如果你之前曾嘗試通過(guò)CSS創(chuàng)建過(guò)標(biāo)簽頁(yè)，你可能已經(jīng)在標(biāo)簽邊框正確對(duì)齊的問(wèn)題上受到過(guò)挫折，以下就是一些大部分朋友碰到的常見(jiàn)問(wèn)題。

這里我想出來(lái)一個(gè)解決方案能處理這個(gè)討厭的問(wèn)題。請(qǐng)看看下面的圖片然后看一下CSS，以及它邊上的輔助注釋，以便更好的理解。

Tabs CSS

復(fù)制代碼代碼如下:

 
ul.tabs { 
margin: 0; 
padding: 0; 
float: left; 
list-style: none; 
height: 32px; /*–Set height of tabs–*/ 
border-bottom: 1px solid #999; 
border-left: 1px solid #999; 
width: 100%; 
} 
ul.tabs li { 
float: left; 
margin: 0; 
padding: 0; 
height: 31px; /*–Subtract 1px from the height of the unordered list–*/ 
line-height: 31px; /*–Vertically aligns the text within the tab–*/ 
border: 1px solid #999; 
border-left: none; 
margin-bottom: -1px; /*–Pull the list item down 1px–*/ 
overflow: hidden; 
position: relative; 
background: #e0e0e0; 
} 
ul.tabs li a { 
text-decoration: none; 
color: #000; 
display: block; 
font-size: 1.2em; 
padding: 0 20px; 
border: 1px solid #fff; /*–Gives the bevel look with a 1px white border inside the list item–*/ 
outline: none; 
} 
ul.tabs li a:hover { 
background: #ccc; 
} 
html ul.tabs li.active, html ul.tabs li.active a:hover { /*–Makes sure that the active tab does not listen to the hover properties–*/ 
background: #fff; 
border-bottom: 1px solid #fff; /*–Makes the active tab look like it's connected with its content—*/ 
} 

Tab Content CSS

復(fù)制代碼代碼如下:

 
.tab_container { 
border: 1px solid #999; 
border-top: none; 
overflow: hidden; 
clear: both; 
float: left; width: 100%; 
background: #fff; 
} 
.tab_content { 
padding: 20px; 
font-size: 1.2em; 
} 

Step2. 讓標(biāo)簽動(dòng)起來(lái) – JQuery
對(duì)那些不是很熟悉JQuery的同學(xué)，請(qǐng)看他們的官方網(wǎng)站以獲得一個(gè)大體的概述

以下腳本包含注釋，解釋了哪只JQuery行為（action）正在被執(zhí)行。

復(fù)制代碼代碼如下:

 
$(document).ready(function() { 

//When page loads… 
$(“.tab_content”).hide(); //Hide all content 
$(“ul.tabs li:first”).addClass(“active”).show(); //Activate first tab 
$(“.tab_content:first”).show(); //Show first tab content 

//On Click Event 
$(“ul.tabs li”).click(function() { 

$(“ul.tabs li”).removeClass(“active”); //Remove any “active” class 
$(this).addClass(“active”); //Add “active” class to selected tab 
$(“.tab_content”).hide(); //Hide all tab content 

var activeTab = $(this).find(“a”).attr(“href”); //Find the href attribute value to identify the active tab + content 
$(activeTab).fadeIn(); //Fade in the active ID content 
return false; 
}); 
}); 

View Demo

最后

最終你完成了它，一個(gè)用CSS及JQuery制作的美麗而簡(jiǎn)單的標(biāo)簽功能。如果你有任何問(wèn)題，評(píng)論，或者建議請(qǐng)隨便讓我知曉！
完整的演示代碼:

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Simple Tabs with CSS &amp; jQuery</title> 
<style type="text/css"> 
body { 
background: #f0f0f0; 
margin: 0; 
padding: 0; 
font: 10px normal Verdana, Arial, Helvetica, sans-serif; 
color: #444; 
} 
h1 {font-size: 3em; margin: 20px 0;} 
.container {width: 500px; margin: 10px auto;} 
ul.tabs { 
margin: 0; 
padding: 0; 
float: left; 
list-style: none; 
height: 32px; 
border-bottom: 1px solid #999; 
border-left: 1px solid #999; 
width: 100%; 
} 
ul.tabs li { 
float: left; 
margin: 0; 
padding: 0; 
height: 31px; 
line-height: 31px; 
border: 1px solid #999; 
border-left: none; 
margin-bottom: -1px; 
background: #e0e0e0; 
overflow: hidden; 
position: relative; 
} 
ul.tabs li a { 
text-decoration: none; 
color: #000; 
display: block; 
font-size: 1.2em; 
padding: 0 20px; 
border: 1px solid #fff; 
outline: none; 
} 
ul.tabs li a:hover { 
background: #ccc; 
} 
html ul.tabs li.active, html ul.tabs li.active a:hover { 
background: #fff; 
border-bottom: 1px solid #fff; 
} 
.tab_container { 
border: 1px solid #999; 
border-top: none; 
clear: both; 
float: left; 
width: 100%; 
background: #fff; 
-moz-border-radius-bottomright: 5px; 
-khtml-border-radius-bottomright: 5px; 
-webkit-border-bottom-right-radius: 5px; 
-moz-border-radius-bottomleft: 5px; 
-khtml-border-radius-bottomleft: 5px; 
-webkit-border-bottom-left-radius: 5px; 
} 
.tab_content { 
padding: 20px; 
font-size: 1.2em; 
} 
.tab_content h2 { 
font-weight: normal; 
padding-bottom: 10px; 
border-bottom: 1px dashed #ddd; 
font-size: 1.8em; 
} 
.tab_content h3 a{ 
color: #254588; 
} 
.tab_content img { 
float: left; 
margin: 0 20px 20px 0; 
border: 1px solid #ddd; 
padding: 5px; 
} 
</style> 
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
//Default Action 
$(".tab_content").hide(); //Hide all content 
$("ul.tabs li:first").addClass("active").show(); //Activate first tab 
$(".tab_content:first").show(); //Show first tab content 
//On Click Event 
$("ul.tabs li").click(function() { 
$("ul.tabs li").removeClass("active"); //Remove any "active" class 
$(this).addClass("active"); //Add "active" class to selected tab 
$(".tab_content").hide(); //Hide all tab content 
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content 
$(activeTab).fadeIn(); //Fade in the active content 
return false; 
}); 
}); 
</script> 
</head> 
<body> 
<div class="container"> 
<h1>Simple Tabs w/ CSS &amp; jQuery</h1> 
<ul class="tabs"> 
<li><a href="#tab1">Gallery</a></li> 
<li><a href="#tab2">Submit</a></li> 
<li><a href="#tab3">Resources</a></li> 
<li><a href="#tab4">Contact</a></li> 
</ul> 
<div class="tab_container"> 
<div id="tab1" class="tab_content"> 
<h2>Gallery</h2> 
<a ><img src="/upload/201103/20110301233125928.gif" alt="" /></a> 
<h3><a >www.DesignBombs.com</a></h3> 
<p>Saw polecat than took bankrupt good hillbilly stew, crazy, fancy and hillbilly heap rodeo, pappy. Thar range saw me him sherrif nothin' shiney dirt, pigs sheep city-slickers everlastin' shotgun driveway. Promenade catfight fart fiddle jiggly gonna tarnation, fence, what quarrel dirty, if. Pot grandma crop kinfolk jezebel diesel coonskin hoosegow wirey fixin' shack good roped in. Reckon stew tax-collectors, grandpa tobaccee hayseed good wash tired caboodle burnin' landlord. </p> 
<p>Smokin' driveway wrestlin' go darn truck moonshine wirey cow grandpa saw, coonskin bull, java, huntin'. </p> 
<p>Stinky yonder pigs in, rustle kinfolk gonna marshal sittin' wagon, grandpa. Ya them firewood buffalo, tobaccee cabin.</p> 
</div> 
<div id="tab2" class="tab_content"> 
<h2>Submit</h2> 
<a > <img src="/upload/201103/20110301233128842.gif" alt="" /></a> 
<h3><a >www.DesignBombs.com</a></h3> 
<p>Grandma been has bankrupt said hospitality fence everlastin' wrestlin' rodeo redblooded chitlins marshal. Boobtube soap her hootch lordy cow, rattler. </p> 
<p>Rottgut havin' ignorant go, hee-haw shiney jail fetched hillbilly havin' cipherin'. Bacon no cowpoke tobaccee horse water rightly trailer tools git hillbilly. </p> 
<p>Jezebel had whiskey snakeoil, askin' weren't, skanky aunt townfolk fetched. Fit tractor, them broke askin', them havin' rattler fell heffer, been tax-collectors buffalo. Quarrel confounded fence wagon trailer, moonshine wuz, city-slickers fixin' cow. </p> 
</div> 
<div id="tab3" class="tab_content"> 
<h2>Resources</h2> 
<a ><img src="/upload/201103/20110301233130895.gif" alt="" /></a> 
<h3><a >www.DesignBombs.com</a></h3> 
<p>Dirt tools thar, pot buffalo put jehosephat rent, ya pot promenade. Come pickled far greasy fightin', wirey, it poor yer, drive jig landlord. Rustle is been moonshine whomp hogtied. Stew, wirey stew cold uncle ails. Slap hoosegow road cooked, where gal pot, commencin' country. Weren't dogs backwoods, city-slickers me afford boxcar fat, dumb sittin' sittin' drive rustle slap, tornado. Fuss stinky knickers whomp ain't, city-slickers sherrif darn ignorant tobaccee round-up old buckshot that. </p> 
<p>Deep-fried over shootin' a wagon cheatin' work cowpoke poor, wuz, whiskey got wirey that. Shot beer, broke kickin' havin' buckshot gritts. Drunk, em moonshine his commencin' country drunk chitlins stole. Fer tonic boxcar liar ass jug cousin simple, wuz showed yonder hee-haw drive is me. Horse country inbred wirey, skanky kinfolk. Rattler, sittin' darn skanky fence, shot huntin'.</p> 
</div> 
<div id="tab4" class="tab_content"> 
<h2>Contact</h2> 
<a > <img src="/upload/201103/20110301233131829.gif" alt="" /></a> 
<h3><a >www.DesignBombs.com</a></h3> 
<p>Grandma been has bankrupt said hospitality fence everlastin' wrestlin' rodeo redblooded chitlins marshal. Boobtube soap her hootch lordy cow, rattler. </p> 
<p>Rottgut havin' ignorant go, hee-haw shiney jail fetched hillbilly havin' cipherin'. Bacon no cowpoke tobaccee horse water rightly trailer tools git hillbilly. </p> 
<p>Jezebel had whiskey snakeoil, askin' weren't, skanky aunt townfolk fetched. Fit tractor, them broke askin', them havin' rattler fell heffer, been tax-collectors buffalo. Quarrel confounded fence wagon trailer, moonshine wuz, city-slickers fixin' cow. </p> 
</div> 
</div> 
</div> 
<div style="clear: both; display: block; padding: 10px 0; text-align:center;"><a >Simple Tabs w/ CSS &amp; jQuery</a> by Soh Tanaka. Check out his <a >Web Design Blog</a> for more tutorials!</div> 
</body> 
</html> 