jQuery簡單tab切換效果實(shí)現(xiàn)方法
本文實(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ì)有所幫助。
- javascript實(shí)現(xiàn)tab切換的四種方法
- 一個(gè)精簡的JS DIV層tab切換代碼
- js(JavaScript)實(shí)現(xiàn)TAB標(biāo)簽切換效果的簡單實(shí)例
- javascript實(shí)現(xiàn)tabs選項(xiàng)卡切換效果(自寫原生js)
- Vue.js組件tabs實(shí)現(xiàn)選項(xiàng)卡切換效果
- 原生js實(shí)現(xiàn)tab選項(xiàng)卡切換
- 使用jquery實(shí)現(xiàn)div的tab切換實(shí)例代碼
- jQuery版Tab標(biāo)簽切換
- jQuery實(shí)現(xiàn)的Tab滑動選項(xiàng)卡及圖片切換(多種效果)小結(jié)
- js和jquery實(shí)現(xiàn)tab狀態(tài)欄切換效果
相關(guān)文章
jQuery 如何先創(chuàng)建、再修改、后添加DOM元素
這篇文章主要介紹了jQuery 如何創(chuàng)建、修改、添加DOM元素,需要的朋友可以參考下2014-05-05jQuery ui實(shí)現(xiàn)動感的圓角漸變網(wǎng)站導(dǎo)航菜單效果代碼
這篇文章主要介紹了jQuery ui實(shí)現(xiàn)動感的圓角漸變網(wǎng)站導(dǎo)航菜單效果代碼,涉及jquery插件構(gòu)造圓角圖形及頁面過度效果的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08jQuery插件之Tocify動態(tài)節(jié)點(diǎn)目錄菜單生成器附源碼下載
Tocify是一個(gè)能夠動態(tài)生成文章節(jié)點(diǎn)目錄的jQuery插件,通過本文給大家分享jQuery插件之Tocify動態(tài)節(jié)點(diǎn)目錄菜單生成器,對tocify菜單生成器相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01使用jquery的cookie實(shí)現(xiàn)登錄頁記住用戶名和密碼的方法
今天小編就為大家分享一篇關(guān)于使用jquery的cookie實(shí)現(xiàn)登錄頁記住用戶名和密碼的方法,小編覺得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來看看吧2019-03-03JQuery Tips(4) 一些關(guān)于提高JQuery性能的Tips
如今咱祖國已經(jīng)崛起了..電腦的配置也是直線上升.可是js的性能問題依然不可小覷..尤其在萬惡的IE中..js引擎速度本來就慢..如果JS如果再寫不好,客戶端多開幾個(gè)窗口假死肯定是家常便飯了.廢話不說了,下面說說js性能提升的一些小Tips.2009-12-12jQuery實(shí)現(xiàn)基本動畫效果的方法詳解
這篇文章主要介紹了jQuery實(shí)現(xiàn)基本動畫效果的方法,結(jié)合實(shí)例形式分析了jQuery animate()方法實(shí)現(xiàn)動畫效果相關(guān)操作技巧,需要的朋友可以參考下2018-09-09