最后一个列表项未切换

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