jquery - Javascript - giving an li an active state -
i'm trying use javascript make sort of slideshow. want each li in slideshow navigation given active state upon click , when slideshow cycles through next li item.
i'm relatively new javascript have basic understanding of it. managed achieve part of wanted i.e. divs cycle through , li navigation given active state when it's clicked, cannot work out how give active css class when next item in list active cycle javascript.
i have attached html , javascript below.
html
<div id="tabs"> <div id="tab-1"> <h2>fantastic service, care.</h2> <div class="reviews"> <div class="read"><a href="/reviews">read reviews</a></div><!-- .read --> </div><!-- .reviews --> </div><!-- #tab-1 --> <div id="tab-2"> lorem blah blah </div><!-- #tab-2 --> <div id="tab-3"> lorem ipsum </div><!-- #tab-3 --> <div id="tab-4"> lorem blah blah </div><!-- #tab-4 --> <ul class="nav"> <li class="tab"><a href="#tab-1">ratings & reviews</a></li> <li class="tab"><a href="#tab-2">how works</a></li> <li class="tab"><a href="#tab-3">what do</a></li> <li class="tab"><a href="#tab-4">fourth tab</a></li> </ul><!-- .nav --> </div><!-- #tabs --> javascript
//<![cdata[ $(window).load(function(){ $(document).ready(function(){ $('#tabs div').hide(); $('#tabs div:first').show(); $('#tabs ul li:first').addclass('active'); $('#tabs ul li a').click(function(){ $('#tabs ul li').removeclass('active'); $(this).parent().addclass('active'); var currenttab = $(this).attr('href'); $('#tabs div').hide(); $(currenttab).fadein(400).show(); return false; }); }); var divs = $('div[id^="tab-"]').hide(), = 0; (function cycle() { divs.eq(i).show(0) .delay(5000) .hide(0, cycle); = ++i % divs.length; })(); });//]]> thanks in advance.
Comments
Post a Comment