Последний элемент списка не переключается

Question

У меня очень простой код переключения вкладок.В основном HTML выглядит следующим образом:

<ul id="presentation">
    <li><a href="#" name="slide-1" class="tab active"><!--Some content--></a></li>
    <li><a href="#" name="slide-2" class="tab"><!--Some content--></a></li>
    <li><a href="#" name="slide-3" class="tab"><!--Some content--></a></li>
</ul>
<div class="presentation-slides">
    <div id="slide-1" class="content">
        <!--Some content-->
    </div>
    <div id="slide-2" class="content">
        <!--Some content-->
    </div>
    <div id="slide-3" class="content">
        <!--Some content-->
    </div>
</div>

, а код javascript также очень прост:

<script type="text/javascript">
    // Setup Interval
    setInterval(function(){
      // Hide visible div, get reference to next
      reference = $("div[id^=slide]:visible").hide().next("div[id^=slide]");
      if(reference.size()){
          $(reference).fadeIn();
          $("a.tab").removeClass("active");
          var tabName = $("div[id^=slide]:visible").attr('id');
          $("a[name='"+tabName+"']").addClass("active");
      }else{$("div[id^=slide]:first").fadeIn();}
      // Do this every ten seconds
    }, 10000);
</script>

Теперь проблема в том, что слайды переключают способ, которым они должны, но вкладки нет.Когда последняя вкладка переключается на первую, последняя остается активной, и я понятия не имею, почему.Может ли кто-нибудь помочь мне с этой проблемой?

Answer 1

Когда вы переключаетесь на первый слайд, код для установки активной первой вкладки отсутствует.

else{$("div[id^=slide]:first").fadeIn();}

Все, что вы делаете, - это постепенное исчезновение первого слайда. Я думаю, что вам не хватает некоторого кодачто-то вроде:

else{
  $("div[id^=slide]:first").fadeIn();
  $("a.tab").removeClass("active").first().addClass("active");
}