Question

我想渲染一个不可见的div：
当.button-1为“有效”时，隐藏.button-2，反之亦然。

类似CSS中的display:none但使用Javascript

脚本

$(document).ready(function(){
    $('.button-1').click(function(){
        $(this).toggleClass('active');
    });
});

$(document).ready(function(){
    $('.button-2').click(function(){
        $(this).toggleClass('active');
    });
});

有什么想法吗？感谢。

Answer 1

您可以使用下一个脚本：

$('#button1').click(function(){
    toggleButtons();
});
$('#button2').click(function(){
    toggleButtons();
});

//hiding second button at the beginning
$('#button2').toggle();

//switch buttons visibility
function toggleButtons() {
    $('#button1').toggle();
    $('#button2').toggle();
}

请参阅Fiddle sample。

Answer 2

所以你只希望一次看到其中一个项目？

您可以设置一个＆＃34; lock＆＃34;，这样一个变量的状态代表div当前处于活动状态。

所以在你的代码中（实际上你会把它放在某个命名空间中，但只是让它工作）：

var activeButton = "button-1";

$(document).ready(function(){
    $('.button-1').click(function(){
        $(this).toggleClass('active');
        if (activeButton == "button-2") {
            $('.button-2').toggleClass('active');
        }
        activeButton = "button-1";
    });
});

$(document).ready(function(){
    $('.button-2').click(function(){
        $(this).toggleClass('active');
            if (activeButton == "button-1") {
               $('.button-2').toggleClass('active')
            }
            activeButton = "button-2";
        }
    });
});

Answer 3

<style>
.button-1,.button-2 {
display: none;
}
.active {
display: block;
}
</style>
$('.button-1').click(function(){
    $(this).toggleClass('active');
    $('.button-2').toggleClass('active');
});
$('.button-2').click(function(){
    $(this).toggleClass('active');
    $('.button-1').toggleClass('active');
});

没有CSS：

$('.button-1').click(function(){
    $(this).toggle();
    $('.button-2').toggle();
});
$('.button-2').click(function(){
    $(this).toggle();
    $('.button-1').toggle();
});

Answer 4

您可以使用以下方法将CSS显示设置为＆＃34; none＆＃34;使用JQuery？：

$(this).css("display","none");

Answer 5

如果你的div id是例如mydiv那么你可以使用hide函数来隐藏它

$('#mydiv').hide();

如何通过单击按钮隐藏带有脚本的div

5 个答案: