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

最后一个列表项没有切换

1 个答案: