jquery中實現(xiàn)標簽切換效果的代碼

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

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

核心代碼：

 
$("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一致！
完整的代碼

復制代碼代碼如下:

 
<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> 

簡單的jQuery標簽頁Simple Tabs w（使用CSS及JQuery）
我知道有很多演示指導如何使用CSS及JQuery創(chuàng)建標簽頁，但是我還是決定自己動手創(chuàng)建屬于我自己的標簽頁。當然我并不知道技術手法上是否（與別人的）相同，但我希望這個指導很容易懂，甚至對于一個初學者來說搞懂它并不費力。

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

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

線框：對網(wǎng)頁安排的一種視覺上的描繪

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

HTML

復制代碼代碼如下:

 
<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> 

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

這里我想出來一個解決方案能處理這個討厭的問題。請看看下面的圖片然后看一下CSS，以及它邊上的輔助注釋，以便更好的理解。

Tabs CSS

復制代碼代碼如下:

 
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

復制代碼代碼如下:

 
.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. 讓標簽動起來 – JQuery
對那些不是很熟悉JQuery的同學，請看他們的官方網(wǎng)站以獲得一個大體的概述

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

復制代碼代碼如下:

 
$(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

最后

最終你完成了它，一個用CSS及JQuery制作的美麗而簡單的標簽功能。如果你有任何問題，評論，或者建議請隨便讓我知曉！
完整的演示代碼:

復制代碼代碼如下:

 
<!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> 