Javascript - 给一个活跃的状态

Question

我正在尝试使用Javascript制作一种幻灯片。我希望幻灯片显示中的每个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;

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

提前致谢。