javascript - Javascript - li をアクティブ状態にする

Question

Javascript を使用して一種のスライドショーを作成しようとしています。スライドショー ナビゲーションの各 Li に、クリック時にアクティブな状態を与え、スライド ショーが次の Li A アイテムに循環するときにもアクティブな状態を与えたいと考えています。

私はJavascriptに比較的慣れていませんが、非常に基本的な理解があります。私が望んでいたことの一部を達成することができました。つまり、divが循環し、liナビゲーションがクリックされたときにアクティブな状態になりますが、リストの次の項目がアクティブなCSSクラスを与える方法がわかりませんサイクル javascript によってアクティブになります。

以下にHTMLとJavascriptを添付しました。

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;

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

前もって感謝します。