jQuery簡單tab切換效果實現(xiàn)方法
更新時間：2015年04月08日 08:57:31 作者：企鵝不笨
這篇文章主要介紹了jQuery簡單tab切換效果實現(xiàn)方法,涉及jQuery鏈式操作及遍歷的技巧,是非常具有實用價值的功能,需要的朋友可以參考下
本文實例講述了jQuery簡單tab切換效果實現(xiàn)方法。分享給大家供大家參考。具體如下：
<script src="js/jquery-latest.js"></script>
<SCRIPT language=javascript type=text/javascript>
$(document).ready(function () {
$('.tabtitle li').click(function () {
var index = $(this).index();
$(this).attr('class',"tabhover").siblings('li').attr('class','taba');
$('.tabcontent').eq(index).show(200).siblings('.tabcontent').hide();
});
var t = 0;
var timer = setInterval(function(){
if( t == $('.tabtitle li').length ) t = 0;
$('.tabtitle li:eq('+t+')').click();
t++;
}, 700)
})
</SCRIPT>
<div class="maintab">
<ul class="tabtitle">
<li class="tabhover"><a href="#">選擇標題1</a></li>
<li class="taba"><a href="#">選擇標題2</a></li>
<li class="taba"><a href="#">選擇標題3</a></li>
<li class="taba"><a href="#">選擇標題4</a></li>
<li class="taba"><a href="#">選擇標題5</a></li>
</ul>
<div class="tabcontent">
選擇內(nèi)容1
</div>
<div class="tabcontent" style="DISPLAY: none">
選擇內(nèi)容2
</div>
<div class="tabcontent" style="DISPLAY: none">
選擇內(nèi)容3
</div>
<div class="tabcontent" style="DISPLAY: none">
選擇內(nèi)容4
</div>
<div class="tabcontent" style="DISPLAY: none">
選擇內(nèi)容5
</div>
</div>
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
相關(guān)文章
jquery ajax的執(zhí)行順序大家在項目經(jīng)常會顛倒，下面通過本文給大家介紹jquery ajax的執(zhí)行順序，涉及到j(luò)query ajax執(zhí)行順序相關(guān)知識，對jquery ajax執(zhí)行順序相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01
這篇文章主要介紹了jquery實現(xiàn)彈出層遮罩效果的簡單實例。需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
這篇文章主要介紹了JQuery中Ajax的操作完整例子,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
jQuery+CSS3實現(xiàn)四種應(yīng)用廣泛的導(dǎo)航條制作實例詳解
這篇文章主要介紹了jQuery+CSS3實現(xiàn)多種類型的導(dǎo)航條制作實例詳解的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
輕松學(xué)習(xí)jQuery插件EasyUI EasyUI實現(xiàn)拖動基本操作
這篇文章主要幫大家輕松學(xué)習(xí)jQuery插件EasyUI，并利用EasyUI實現(xiàn)拖動基本操作，文章并提供了一個學(xué)校課程表簡單實例，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)彈彈球小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
詳解使用jQuery.i18n.properties實現(xiàn)js國際化
這篇文章主要介紹了使用jQuery.i18n.properties實現(xiàn)js國際化，具有一定的參考價值，感興趣的可以隨小編看一看2018-05-05
這篇文章主要介紹了jQuery復(fù)合事件用法,結(jié)合具體實例形式分析了jQuery復(fù)合事件的簡單定義與使用方法,需要的朋友可以參考下2017-06-06
jquery 圖片截取工具jquery.imagecropper.js
工作需要參考網(wǎng)上的一些代碼做了個圖片截取工具，最后干脆封裝成一個jquery的插件。2010-04-04
jQuery設(shè)置Easyui校驗規(guī)則(推薦)
本文給大家介紹jquery設(shè)置easyui校驗規(guī)則的實現(xiàn)代碼，代碼簡單易懂，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧2016-11-11