最后一个列表项未切换

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");
}