Question

On line 6 below, I have $("ul.tabrow li").removeClass("active"); //Remove any "active" class If I change it to use $(this).removeClass("active") instead then it does not work as I thought it was.

The code works how I want it to right now, I am just wanting to know why what I mentioned above does not work, on line 7 below I use $(this) on what appears to be the same selector and that works on line 7’s code but differently on line 6.

Can anyone explain this?

$("ul.tabrow li").bind({
  click: function() {
    return false;
  },
  mouseenter: function() {
    $("ul.tabrow li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tab-box").hide(); //Hide all tab content
    var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
    //$(activeTab).fadeIn(); //Fade in the active content
    $(activeTab).show(); //Fade in the active content
    return false;
  }
});

Answer 1

You actually want to use $("ul.tabrow li") on line 6. This is because $(this) only refers to the current list item, not all of them.

$(this) is not a replacement for the selector, it refers to the current active element (the one you are mousing over). So using this on line six removes the active class from the current element and then immediately adds it back. The result is essentially nothing happening.

If you don’t want to repeat the selector then you may want to use something more generic like

$(this).siblings().removeClass('active');