jquery中實現簡單的tabs外掛程式功能的代碼_jquery

言歸正傳，以下是全文。

先附上兩張最簡單的效果圖。

首先編寫簡單的HTML代碼。用作tabs的UL標籤和包含內容的p標籤。

<ul><li><a href="#first">海闊天空</a></li><li><a href="#second">光輝歲月</a></li><li><a href="#third">真的愛你</a></li></ul>簡單起見，我唯寫三個。

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

<div id="second"><p>鐘聲響起歸家的訊號，在他生命裡彷彿帶點唏噓……自信可改變未來，問誰又能做到。</p></div>

<div id="third"><p>無法可修飾的一對手，帶出溫暖永遠在背後……請准我說聲，真的愛你。</p></div>

所有外觀不用圖片，簡簡單單就行，因此全部使用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底部的邊框顏色設為跟內容背景一樣的顏色

重頭戲來了，那就是如何用簡單的jquery實現tabs功能。

複製代碼 代碼如下:

<script language="javascript">
$(function{
$('div').hide().filter(':first').show();//預設只顯示第一個<div>標籤中的內容。
$('a').click(function(){
$('div').hide();
$('a').removeClass('selected');
$(this).addClass('selected');
$('div').hide().filter(this.hash).show();//這步至關重要，this.hash的意思是，當點選連結時，只顯示被點選連結指向的內容。比如點擊<a href="first">時就只顯示<div id="first">下的內容。
$('div').
}).filter(':first').click();//預設情況下，讓它點擊第一個按鈕。
});
</script>

以上是全部內容，感興趣的可以去隨便測試一下。謝謝大家。