Question

I have a very simple tab switching code. Basically HTML looks like this:

<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>

and javascript code is also very simple:

<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>

Now the problem is that slides switch the way they are supposed to, but tabs don’t. When last tab is switching to first, the last one stays active and I have absolutely no idea why. Could someone help me with this problem?

Answer 1

When you switch to the first slide, there is no code for setting the first tab to active.

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

All you are doing is fading the first slide in. I think you are missing some code, something like:

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