0

I'm trying to use Javascript to make a sort of slideshow. I want each li a in the slideshow navigation to be given an active state upon click and also when the slideshow cycles through to the next li a item.

I'm relatively new to Javascript but have some very basic understanding of it. I managed to achieve part of what i wanted i.e. for the divs to cycle through and for the li navigation to be given an active state when it's clicked, but cannot work out how to give it an active CSS class when the next item in the list is active by the cycle javascript.

I have attached the HTML and Javascript below.

HTML

<div id="tabs">
  <div id="tab-1">
   <h2>Fantastic service, they really care.</h2>
   <div class="reviews">
    <div class="read"><a href="/reviews">Read all 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 it Works</a></li>
  <li class="tab"><a href="#tab-3">What We 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(),
   i = 0;

  (function cycle() { 

  divs.eq(i).show(0)
    .delay(5000)
    .hide(0, cycle);

  i = ++i % divs.length;

  })();
});//]]>

Thanks in advance.

4

0 回答 0