jquery中實(shí)現(xiàn)簡(jiǎn)單的tabs插件功能的代碼
言歸正傳，以下是全文。
先附上兩張最簡(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功能。
<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è)試一下。謝謝大家。
相關(guān)文章
jQuery插件HighCharts繪制2D帶有Legend的餅圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制2D帶有Legend的餅圖效果,結(jié)合實(shí)例形式分析了jQuery使用HighCharts繪制帶明細(xì)顯示的餅狀圖效果實(shí)現(xiàn)技巧,并附帶了demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
在網(wǎng)頁(yè)客戶端，我們經(jīng)常會(huì)遇到讀取或者設(shè)置cookie的情況，如果用純生的js我們可能會(huì)遇到一些兼容性帶來(lái)的麻煩，這里給大家介紹一個(gè)比較實(shí)用jquery操作cookie的插件2014-01-01
這篇文章主要介紹了jQuery Ajax使用實(shí)例,本文講解了$.ajax的一般格式、$.ajax的參數(shù)描述、$.ajax需要注意的一些地方、$.ajax我的實(shí)際應(yīng)用例子,需要的朋友可以參考下2015-04-04
JQuery擴(kuò)展插件Validate 3通過(guò)參數(shù)設(shè)置錯(cuò)誤信息
最終顯示在頁(yè)面上的錯(cuò)誤分為兩種：第一種是默認(rèn)錯(cuò)誤信息，該信息已經(jīng)被定義在插件中了，可以手動(dòng)修改。2011-09-09
jQuery實(shí)現(xiàn)的浮動(dòng)層div瀏覽器居中顯示效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)的浮動(dòng)層div瀏覽器居中顯示效果,涉及jQuery及JS動(dòng)態(tài)操作頁(yè)面元素與屬性相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02
40個(gè)有創(chuàng)意的jQuery圖片、內(nèi)容滑動(dòng)及彈出插件收藏集之一
在網(wǎng)頁(yè)的首頁(yè)或圖片專題頁(yè)面很多地方都會(huì)用到圖片滑動(dòng)插件來(lái)循環(huán)切換多張圖片，并且用戶可以點(diǎn)擊左右按鈕來(lái)切換圖片。相信大家都知道jQuery是最優(yōu)秀的Javascript框架之一2011-12-12
這篇文章主要介紹了jQuery老黃歷完整實(shí)現(xiàn)方法,詳細(xì)講述了基于jQuery實(shí)現(xiàn)黃歷的詳細(xì)步驟與技巧,需要的朋友可以參考下2015-01-01
Jquery給當(dāng)前頁(yè)或者跳轉(zhuǎn)后頁(yè)面的導(dǎo)航欄添加選中后樣式的實(shí)例
下面小編就為大家?guī)?lái)一篇Jquery給當(dāng)前頁(yè)或者跳轉(zhuǎn)后頁(yè)面的導(dǎo)航欄添加選中后樣式的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12
收集的10個(gè)免費(fèi)的jQuery相冊(cè)
或許在網(wǎng)絡(luò)上你已經(jīng)見(jiàn)過(guò)數(shù)百種通過(guò)jQuery實(shí)現(xiàn)的相冊(cè)，但是我們發(fā)現(xiàn)的這些相冊(cè)，他們有額外的東西，優(yōu)雅和獨(dú)特的創(chuàng)意！每個(gè)相冊(cè)都是可在線預(yù)覽和免費(fèi)下載的。你可以為你的Web項(xiàng)目添加色彩。2011-02-02
jQuery實(shí)現(xiàn)為table表格動(dòng)態(tài)添加或刪除tr功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)為table表格動(dòng)態(tài)添加或刪除tr功能,結(jié)合實(shí)例形式分析了jQuery針對(duì)table表格行動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-02-02