如果已经点击了其他 div，则禁止点击其他 div

Question

这是我的 jsfiddle：https://jsfiddle.net/2ajo5jdx/

如果你点击 link-b 一个 div 淡入，现在如果你点击 link-c 另一个 div 淡入 too.I 不不想同时有多个 div time.I 如果 link-b 已被点击，则希望禁用对 link-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

我不确定这是不是你的意思，但是如果你想每次只显示一个 div 你可以使用以下基于 active class 的解决方案。

希望对您有所帮助。

  $('.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>

Answer 2

要在您的代码中几乎不添加任何内容，您可以使用一个标志，在 link 中每次点击时将其设置为 true，在关闭时设置为 false

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);
    });
});

如果已经点击了其他 div，则禁止点击其他 div

Disable click in other divs if one has been clicked already

javascript

jquery

fadein