Нужно, чтобы мои вкладки jQuery не закрывались, когда они активны и уже открыты.

Question

Я использую этот скрипт jQuery, чтобы скрыть и открыть 4 контейнера div с содержимым HTML на странице.

JQuery:

$('.content-drawer').hide(); 
$('#tab1').show(); 
$('#calc').show(); 

$('.tab').click(function() { 
var $this = $(this); 
var target = $(this.rel); 
$this.closest('li').addClass('active focus'); 
// Add the classes to the closest li of the clicked anchor 

$('.tab').not($this).closest('li').removeClass('active focus'); 
// Remove the classes for the non-clicked items 

$('.content-drawer').not(target).fadeOut(); 
// Slideup the other contents 

target.delay(400).fadeToggle(); 
// Toggle the css3-mediaqueriesrrent content 

if (target.is(':visible')) { 
    // Only if the target is visible remove the active class 
    $this.closest('li').removeClass('active'); 
} 
return false; 
}); 

HTML:

<div class="content-drawer" id="tab2"> 
    <div class="sixcol"> 
     <img src="css/img/books.png" alt=""> 
    </div> 
    <div class="sixcol last"> 
     <article> 
      <h2>From our family to yours</h2> 
      <p>Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p> 
      <a class="button fancy" href="#">Learn More</a> 
     </article> 
    </div> 
</div> 

Клиент не согласен с ним на счет того, что при нажатии кнопки DIV, который в настоящее время открыт, он не закрывает, оставляя ничего на экран.

Что мне нужно: для открытого DIV, чтобы не быть «закрываемой» по щелчку

Answer 1

Один из способов, которые вы можете убедиться, чтобы иметь один DIV видимую всегда использовать :visibleselector that jQuery has. Я изменил свой код и добавил в том, когда у вас есть мышь на .tab тег

$('.content-drawer').hide(); 
$('#tab1').show(); 
$('#calc').show(); 

$('.tab').click(function() { 
    var $this = $(this); 
    var target = $(this.rel); 

    //Get the number of .tabs visible 
    var visible = $('.tab').filter(":visible").length; 
    //If only one is visible then return before preforming any actions 
    if(visible === 1){ 
     return; 
    } 

    $this.closest('li').addClass('active focus'); 
    // Add the classes to the closest li of the clicked anchor 

    $('.tab').not($this).closest('li').removeClass('active focus'); 
    // Remove the classes for the non-clicked items 

    $('.content-drawer').not(target).fadeOut(); 
    // Slideup the other contents 

    target.delay(400).fadeToggle(); 
    // Toggle the css3-mediaqueriesrrent content 

    if (target.is(':visible')) { 
     // Only if the target is visible remove the active class 
     $this.closest('li').removeClass('active'); 
    } 
    return false; 
}); 

Надеется, что это помогает.