jquery - 使用 Jquery 更改按钮单击时的显示属性

Question

我正在尝试加载一个隐藏了一些 div 的页面，看起来像这样：

<input type="button" id="btnStats" values="Stats"/>
<div id="dvStats" style="display:none">Stats</div>
<div id="dvAlbums" style="display:none">Albums</div>

现在 div 只有文本，因为我无法让它们工作。我有一个将 dvStats 显示分配给 btnStats 上的单击事件的 JS。

$("#btnStats").click($("#dvStats").style.display="block");

还尝试了一些我在搜索有关此问题的旧问题时看到的方法。

$("#btnStats").click($("#dvStats").css(":display","block"));

我无法完成这项工作。也许我错过了什么。

Answer 1

使用 Jquery，您可以轻松完成上述任务。包括 Jquery 库，并使用以下代码：

$("#btnStats").on("click",function(){

    $("#dvStats").css("display","block")
    $("#dvAlbums").css("display","block")

});

Answer 2

尝试：

$("#btnStats").click(function() {
    $("#dvStats").css("display","block");
        /* OR  */
    $("#dvStats").show();
});

Answer 3

试试这个，而不是使用该.css()方法，而是使用该.show()方法，因为它做同样的事情：

$("#btnStats").click(function () {
    $("#dvStats").show();
});

Answer 4

jQuery.click将回调函数作为参数，因此需要将函数作为参数传递给 click 函数调用。

$("#btnStats").click(function(){
    $("#dvStats").show()
});

演示：小提琴

Answer 5

将您的按钮处理程序更改为此，例如：

$("#btnStats").click(function() {
          $("#dvStats").show();
     });

Answer 6

我看不出为什么：

$("#btnStats").click($("#dvStats").css("display","block")); 

不起作用（注意在“显示”一词之前删除了冒号）。

PS 你的文件中有 jQuery 库，不是吗？

否则，您需要设置一个 onclick 事件，该事件调用一个函数来执行以下操作：

document.getElementById('dvStats').style.display = 'block';

Answer 7

$("#btnStats").click(function () {
$("#cont div").toggleClass('hidden').removeClass('visible').siblings().toggleClass('visible').addClass('hidden'); // change class to Hidden if Visible
});
<div id="cont">   
<div id="dvStats" class="visible">Stats</div>
<div id="dvAlbums" class="hidden">Albums</div>
</div>