Code666 (代码贴、代码片段)

[JavaScript] jQuery实现的tab切换效果代码 →→→→→进入此内容的聊天室

来自 , 2020-07-06, 写在 JavaScript, 查看 118 次.
URL http://www.code666.cn/view/f94778df
  1.       <script src="http://code.jquery.com/jquery-latest.js"></script>
  2. <SCRIPT language=javascript type=text/javascript>
  3. $(document).ready(function () {  
  4. $('.tabtitle li').click(function () {
  5. var index = $(this).index();
  6. $(this).attr('class',"tabhover").siblings('li').attr('class','taba');
  7. $('.tabcontent').eq(index).show(200).siblings('.tabcontent').hide();
  8. });
  9.     var t = 0;
  10.     var timer = setInterval(function(){
  11.         if( t == $('.tabtitle li').length ) t = 0;
  12.         $('.tabtitle li:eq('+t+')').click();
  13.         t++;
  14.     }, 700)
  15. })
  16. </SCRIPT>
  17.  
  18.  
  19. <div class="maintab">
  20. <ul class="tabtitle">
  21. <li class="tabhover"><a href="#">选择标题1</a></li>
  22.   <li class="taba"><a href="#">选择标题2</a></li>
  23.   <li class="taba"><a href="#">选择标题3</a></li>
  24.   <li class="taba"><a href="#">选择标题4</a></li>
  25.   <li class="taba"><a href="#">选择标题5</a></li>
  26. </ul>
  27.  
  28. <div class="tabcontent">
  29. 选择内容1
  30. </div>
  31. <div class="tabcontent" style="DISPLAY: none">
  32. 选择内容2
  33. </div>
  34. <div class="tabcontent" style="DISPLAY: none">
  35. 选择内容3
  36. </div>
  37. <div class="tabcontent" style="DISPLAY: none">
  38. 选择内容4
  39. </div>
  40. <div class="tabcontent" style="DISPLAY: none">
  41. 选择内容5
  42. </div>
  43. </div>
  44.  
  45. //javascript/272

回复 "jQuery实现的tab切换效果代码"

这儿你可以回复上面这条便签

captcha

贴代码片段 - Code666