jQuery simple tab toggle effect implementation method


The example of this article describes the implementation of jQuery simple tab switching effect. Share with you for your reference. The details are as follows:

<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="#"> Select the title 1</a></li>
 <li class="taba"><a href="#"> Select the title 2</a></li>
 <li class="taba"><a href="#"> Select the title 3</a></li>
 <li class="taba"><a href="#"> Select the title 4</a></li>
 <li class="taba"><a href="#"> Select the title 5</a></li>
</ul>
<div class="tabcontent">
 Select the content 1
</div>
<div class="tabcontent" style="DISPLAY: none">
 Select the content 2
</div>
<div class="tabcontent" style="DISPLAY: none">
 Select the content 3
</div>
<div class="tabcontent" style="DISPLAY: none">
 Select the content 4
</div>
<div class="tabcontent" style="DISPLAY: none">
 Select the content 5
</div>
</div>

I hope this article has been helpful to your jQuery programming.