jQuery: Run commands only if selected element has class

Question

I have a tab system set up that uses the following structure to automatically detect new tabs:

<a href="#div1id">Show div 1</a>
<div id="div1id">Div1</div>

The thing is, I need to disable the ability to reload a tab by clicking the tab that is already showing. I have tried using .hasClass() and .is() to detect if the clicked tab was already had '.active' applied to it, but with no luck.

Here is my current code for the animation and changes:

$(document).ready(function(){
 $("#tabs li").click(function() {
  $("#tabs li").removeClass('active');
  $(this).addClass("active");
  $(".content").hide();
  var selected_tab = $(this).find("a").attr("href");
  $(selected_tab).fadeIn();
 });
});

Answer 1

Maybe a simple override of the click event

$(".active").click(function(){
      return false;
});

Answer 2

You can use .delegate() to both make it a bit more efficient and solve your issue, like this:

$(function(){
  $("#tabs").delegate("li:not(.active)", "click", function() {
    $("#tabs li").removeClass('active');
    $(this).addClass("active");
    $(".content").hide();
    $($(this).find("a").attr("href")).fadeIn();
  });
});

Bu using :not(.active) in the selector, the click handler will only execute if it does :not() have the .active class...also you have one event handler instead of n event handlers, one for each <li>.

Answer 3

There should be no reason why the following shouldn't work.

$(document).ready(function(){
    $("#tabs li").click(function() {
        if (!$(this).hasClass('active')) {
            $("#tabs li.active").hide();
            $("#tabs li.active").removeClass('active');
            $(this).addClass("active");
            $("#tabs li.active").fadeIn();
        }
    });
});