jQuery簡單tab切換效果實(shí)現(xiàn)方法

更新時(shí)間：2015年04月08日 08:57:31 作者：企鵝不笨

這篇文章主要介紹了jQuery簡單tab切換效果實(shí)現(xiàn)方法,涉及jQuery鏈?zhǔn)讲僮骷氨闅v的技巧,是非常具有實(shí)用價(jià)值的功能,需要的朋友可以參考下

本文實(shí)例講述了jQuery簡單tab切換效果實(shí)現(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="#">選擇標(biāo)題1</a></li>
 <li class="taba"><a href="#">選擇標(biāo)題2</a></li>
 <li class="taba"><a href="#">選擇標(biāo)題3</a></li>
 <li class="taba"><a href="#">選擇標(biāo)題4</a></li>
 <li class="taba"><a href="#">選擇標(biāo)題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è)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

簡述jQuery ajax的執(zhí)行順序
jquery ajax的執(zhí)行順序大家在項(xiàng)目經(jīng)常會顛倒，下面通過本文給大家介紹jquery ajax的執(zhí)行順序，涉及到j(luò)query ajax執(zhí)行順序相關(guān)知識，對jquery ajax執(zhí)行順序相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧
2016-01-01
jquery實(shí)現(xiàn)彈出層遮罩效果的簡單實(shí)例
這篇文章主要介紹了jquery實(shí)現(xiàn)彈出層遮罩效果的簡單實(shí)例。需要的朋友可以過來參考下，希望對大家有所幫助
2014-03-03
JQuery中Ajax的操作完整例子
這篇文章主要介紹了JQuery中Ajax的操作完整例子,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-03-03
jQuery+CSS3實(shí)現(xiàn)四種應(yīng)用廣泛的導(dǎo)航條制作實(shí)例詳解
這篇文章主要介紹了jQuery+CSS3實(shí)現(xiàn)多種類型的導(dǎo)航條制作實(shí)例詳解的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-09-09
輕松學(xué)習(xí)jQuery插件EasyUI EasyUI實(shí)現(xiàn)拖動(dòng)基本操作
這篇文章主要幫大家輕松學(xué)習(xí)jQuery插件EasyUI，并利用EasyUI實(shí)現(xiàn)拖動(dòng)基本操作，文章并提供了一個(gè)學(xué)校課程表簡單實(shí)例，感興趣的小伙伴們可以參考一下
2015-11-11
jQuery實(shí)現(xiàn)彈彈球小游戲
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)彈彈球小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
詳解使用jQuery.i18n.properties實(shí)現(xiàn)js國際化
這篇文章主要介紹了使用jQuery.i18n.properties實(shí)現(xiàn)js國際化，具有一定的參考價(jià)值，感興趣的可以隨小編看一看
2018-05-05
jQuery復(fù)合事件用法示例
這篇文章主要介紹了jQuery復(fù)合事件用法,結(jié)合具體實(shí)例形式分析了jQuery復(fù)合事件的簡單定義與使用方法,需要的朋友可以參考下
2017-06-06
jquery 圖片截取工具jquery.imagecropper.js
工作需要參考網(wǎng)上的一些代碼做了個(gè)圖片截取工具，最后干脆封裝成一個(gè)jquery的插件。
2010-04-04
jQuery設(shè)置Easyui校驗(yàn)規(guī)則(推薦)
本文給大家介紹jquery設(shè)置easyui校驗(yàn)規(guī)則的實(shí)現(xiàn)代碼，代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧
2016-11-11