首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

jQuery Tab 怎么自动切换啊

2012-08-07 
jQuery Tab 如何自动切换啊?下面是tab效果需要自动切换,这个应该如何实现啊?SCRIPT languagejavascript

jQuery Tab 如何自动切换啊?
下面是tab效果需要自动切换,这个应该如何实现啊?


<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();
});
  })
</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">
选择内容1
</div>
<div class="tabcontent" style="DISPLAY: none">
选择内容2
</div>
<div class="tabcontent" style="DISPLAY: none">
选择内容3
</div>
<div class="tabcontent" style="DISPLAY: none">
选择内容4
</div>
<div class="tabcontent" style="DISPLAY: none">
选择内容5
</div>
</div>


[解决办法]
参考下


HTML code
        <script src="http://code.jquery.com/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">选择内容1</div><div class="tabcontent" style="DISPLAY: none">选择内容2</div><div class="tabcontent" style="DISPLAY: none">选择内容3</div><div class="tabcontent" style="DISPLAY: none">选择内容4</div><div class="tabcontent" style="DISPLAY: none">选择内容5</div></div> 

热点排行