jquery改變了程序員寫javascript的方式。作為jquery的愛(ài)好者和新手，最近我學(xué)會(huì)了用寥寥幾句jquery代碼實(shí)現(xiàn)類似tabs插件的功能，相信此文能為許多剛?cè)腴T的jquery愛(ài)好者和想實(shí)現(xiàn)tabs插件功能的朋友帶來(lái)一些幫助。

言歸正傳，以下是全文。

先附上兩張最簡(jiǎn)單的效果圖。

首先編寫簡(jiǎn)單的HTML代碼。用作tabs的UL標(biāo)簽和包含內(nèi)容的p標(biāo)簽。

<ul><li><a href="#first">海闊天空</a></li><li><a href="#second">光輝歲月</a></li><li><a href="#third">真的愛(ài)你</a></li></ul>簡(jiǎn)單起見(jiàn)，我只寫三個(gè)。

<div id="first"><p>今天我，寒夜里看雪飄過(guò)。懷著冷卻了的心窩飄遠(yuǎn)方……仍然自由自我，永遠(yuǎn)高唱我歌，走遍千里。</p></div>

<div id="second"><p>鐘聲響起歸家的訊號(hào)，在他生命里仿佛帶點(diǎn)唏噓……自信可改變未來(lái)，問(wèn)誰(shuí)又能做到。</p></div>

<div id="third"><p>無(wú)法可修飾的一對(duì)手，帶出溫暖永遠(yuǎn)在背后……請(qǐng)準(zhǔn)我說(shuō)聲，真的愛(ài)你。</p></div>

所有外觀不用圖片，簡(jiǎn)簡(jiǎn)單單就行，因此全部使用CSS。這邊我挑比較重要的寫。

li{float:left;}

a{display:block;border:solid 1px #000;}

div{border:solid 1px #000;margin-top=-1px;}

.selected{border-bottom-color:#FFF; color:#F00;}//把選中tab底部的邊框顏色設(shè)為跟內(nèi)容背景一樣的顏色

重頭戲來(lái)了，那就是如何用簡(jiǎn)單的jquery實(shí)現(xiàn)tabs功能。

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

 
<script language="javascript"> 
$(function{ 
$('div').hide().filter(':first').show();//默認(rèn)只顯示第一個(gè)<div>標(biāo)簽中的內(nèi)容。 
$('a').click(function(){ 
$('div').hide(); 
$('a').removeClass('selected'); 
$(this).addClass('selected'); 
$('div').hide().filter(this.hash).show();//這步至關(guān)重要，this.hash的意思是，當(dāng)點(diǎn)擊鏈接時(shí)，只顯示被點(diǎn)擊鏈接指向的內(nèi)容。比如點(diǎn)擊<a href="first">時(shí)就只顯示<div id="first">下的內(nèi)容。 
$('div'). 
}).filter(':first').click();//默認(rèn)情況下，讓它點(diǎn)擊第一個(gè)按鈕。 
}); 
</script> 

以上是全部?jī)?nèi)容，感興趣的可以去隨便測(cè)試一下。謝謝大家。

您可能感興趣的文章: