Question

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

如果你点击link-b一个div淡入，现在如果你点击link-c另一个div fadeIn也是。我不想同时有多个div。我想禁用click如果已经点击了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

要为代码添加几乎任何内容，您可以使用标记，在链接中的每次单击时将其设置为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);
    });
});

Answer 2

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

希望这有帮助。

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

如果已经点击其他div，则禁用其他div;

2 个答案: