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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15298446/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 14:46:03  来源:igfitidea点击:

Change Display property on button click with Jquery

jqueryhtmlbuttonclick

提问by NachoB

I'm trying to load a page where some divs are hidden, looks something like this:

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

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

Right now divs have just text, since I can't get them to work. I have a JS that assigns dvStats display to click event on btnStats.

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

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

Also tried with some methods I saw while searching older questions about this.

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

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

I haven't been able to make this work. Maybe I missed something.

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

回答by heman123

Using Jquery you can easily do the above task.Include Jquery Library, and use this code:

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

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

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

});

回答by Marcus

Try:

尝试:

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

回答by Pete Uh

Try this instead, rather than using the .css()method use the .show()method as it does the same thing:

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

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

回答by Arun P Johny

jQuery.clicktakes a callback function as a parameter, so you need to pass a function as an argument to the click function call.

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

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

Demo: Fiddle

演示:小提琴

回答by Hinrich

Change your button handler to this for example:

例如,将您的按钮处理程序更改为:

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

回答by H2ONOCK

I see no reason why:

我看不出为什么:

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

wouldn't work (note the removal of the colon before the word 'display').

不起作用(请注意删除了“显示”一词之前的冒号)。

P.S. You have got the jQuery library in your file haven't you?

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

Otherwise you'll need to setup an onclick event which calls a function to do a:

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

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

回答by line88

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