如何在按钮单击时显示/隐藏内容？ [关闭]

Posted 2023-03-05

【中文标题】如何在按钮单击时显示/隐藏内容？ [关闭]

【英文标题】：How to show/hide content on button click? [closed]

【发布时间】：2018-03-27 15:29:57

【问题描述】：

我在 p 标签中有一些内容

<p>Some Content</p>

我还有两个按钮“隐藏”和“显示”。

<button>Hide</button>
<button>Show</button>

如果我点击“隐藏”按钮，我想隐藏内容，如果点击“显示”按钮，我想再次显示它。怎么做？使用 JS 还是 JQuery？

【问题讨论】：

你在发布这个问题之前用谷歌搜索过吗？

此站点 ID 以获取代码帮助...

我有我的叔叔 google 可以真正帮助你.. ^_^

Show/hide 'div' using javascript的可能重复

【参考方案1】：

是的，这是一个非常基本的问题，使用一些基本的 jquery hide() 和 show() 函数。查看下面的 sn-p 以供参考。

$('#hide').click(function() 
  $('.content').hide();
);
$('#show').click(function() 
  $('.content').show();
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="content">Some Content</p>

<button id="hide">Hide</button>
<button id="show">Show</button>

【参考方案2】：

你可以使用 jQuery 来做到这一点

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">

<p>Some Content</p>

<button onclick=" $('p').hide();">Hide</button>
<button onclick=" $('p').show();">Show</button>

【讨论】：

谢谢！这是最简单的答案，我不知道为什么有人投票给你。

@WeirdDude 这被否决了，因为它使用onclick 属性，这是附加事件的最糟糕方式，应尽可能避免。所有其他答案都是比这个更好的解决方案。