Отключить щелчок в других дивах, если одна был нажат уже

Question

Это мой jsfiddle: https://jsfiddle.net/2ajo5jdx/

Если щелкнуть по ссылке-б а ДИВО выцветанию в, теперь, если вы нажмете на ссылку-с другим ДИВОЙ FadeIn тоже. Я не хочу больше одного div в то же время. Я хочу отключить клик по ссылке-c, если ссылка уже была нажата.

Есть ли простой способ? Спасибо.

$('.b').on("click", function(e) { 
    e.preventDefault(); 
    $('.a-div').fadeOut(400, function(){ 
     $('.b-div').addClass('active'); 
     $('.b-div').fadeIn(400);   
    }); 
}); 
$('.c').on("click", function(e) { 
    e.preventDefault(); 
    $('.a-div').fadeOut(400, function(){ 
     $('.c-div').addClass('active'); 
     $('.c-div').fadeIn(400); 
    }); 
}); 

Answer 1

Чтобы добавить почти ничего кода, вы можете использовать флаг, установите его верно на каждый клик по ссылке и ложна на близком

var some_link_opened = false; 

$('.b').on("click", function(e) { 
    if (some_link_opened) return; 
    some_link_opened = true; 
    e.preventDefault(); 
    $('.a-div').fadeOut(400, function(){ 
     $('.b-div').addClass('active'); 
     $('.b-div').fadeIn(400);   
    }); 
}); 

$('.x').on("click", function(e) { 
    some_link_opened = false; 
    e.preventDefault(); 
    $('.active').fadeOut(400, function(){ 
     $('this').removeClass('active'); 
     $('.a-div').fadeIn(400); 
    }); 
}); 

Answer 2

Я не уверен, если это то, что вы имеете в виду, но если вы хотите, чтобы показать только один DIV каждый раз, когда вы можете использовать следующую SOLUTIO основанный на active класса.

Надеюсь, это поможет.

---

$('.b').on("click", function(e) { 
 
     e.preventDefault(); 
 
     $('.active').fadeOut(400, function(){ 
 
      $('.active').removeClass('active'); 
 
      $('.b-div').addClass('active'); 
 
      $('.b-div').fadeIn(400);   
 
     }); 
 
    }); 
 
    $('.c').on("click", function(e) { 
 
     e.preventDefault(); 
 
     $('.active').fadeOut(400, function(){ 
 
      $('.active').removeClass('active'); 
 
      $('.c-div').addClass('active'); 
 
      $('.c-div').fadeIn(400); 
 
     }); 
 
    }); 
 
    
 
    $('.x').on("click", function(e) { 
 
     e.preventDefault(); 
 
     $('.active').fadeOut(400, function(){ 
 
      $('this').removeClass('active'); 
 
      $('.a-div').fadeIn(400); 
 
     }); 
 
    });

.b-div,.c-div{ 
 
    
 
    display:none; 
 
} 
 

 
.x { 
 
    color:red; 
 
} 
 

 
.b,.c,.x{ 
 
    
 
    cursor:pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="b">link-b</a> 
 
<a class="c">link-c</a> 
 
<a class="x">x</a> 
 

 
<div class="a-div active">aaaaaaaaaaaaaaaaaaaaaaaaa</div> 
 
<div class="b-div">bbbbbbbbbbbbbbbbbbbbbbbbbbb</div> 
 
<div class="c-div">ccccccccccccccccccccccccccc</div>