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只有文本，因为我不能让它们工作。我有一个JS，它将dvStats显示分配给btnStats上的click事件。

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

演示：Fiddle

Answer 5

将按钮处理程序更改为此示例：

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

Answer 6

我认为没有理由：

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

不起作用（请注意在'display'一词之前删除冒号。）

P.S。你的文件中有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>

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

7 个答案: