使用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>

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

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

我也尝试了一些以前关于这个问题的搜索到的方法。

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

我一直没有能够使这个工作起来。也许我错过了什么。

- NachoB

---

快速问题，冒号是打错了吗？还是在您尝试的代码中实际存在 :display？ - Jon

Answer 1

使用 JQuery 您可以轻松完成上述任务。引入 JQuery 库，然后使用以下代码：

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

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

});

- heman123

Answer 2

$("#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>

- MakeLoveNotWar

Answer 3

尝试：

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

- Marcus

Answer 4

不要使用 .css() 方法，而是使用 .show() 方法，因为它可以实现相同的效果：

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

- Pete Uh

Answer 5

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

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

演示：Fiddle

- Arun P Johny

Answer 6

例如，将您的按钮处理程序更改为以下内容：

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

- Hinrich

Answer 7

我看不出为什么：

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

无法工作（请注意在单词“display”之前冒号的删除）。

附言：您的文件中是否有jQuery库？

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

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

- H2ONOCK

---

因为如果 click 接受一个参数，那么它必须是一个函数指针，你可以通过 $('#btnStats').click(func); function func() { /*foobar */} 或者 $('#btnStats').click(function(){ /foobar/ }); 来获取它。 - Anders Lindén

是的，我已经添加了最新的Jquery文件。然而，那个带有CSS的代码行会在我甚至没有点击它的情况下启动。 - NachoB