如何显示/隐藏点击按钮上的内容？

-10

<p>Some Content</p>

有些内容我也有两个按钮，“隐藏”和“秀”。

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

我想隐藏内容，如果我点击'隐藏'按钮并再次显示它，如果点击'显示'按钮。怎么做？使用JS或JQuery？

来源

2017-10-16 Weird Dude

你有没有发布这个问题之前，一派？ –

这个网站的ID在你的代码帮助... –

我有我的叔叔谷歌谁可以真的帮助你..^_^ –

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

来源

2017-10-16 07:12:37

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

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

是的，它是一个非常基本的问题做到这一点，使用一些基本的jQuery hide()和show()功能。检查下面的代码片段以供参考。

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

来源

2017-10-16 07:13:42

如何显示/隐藏点击按钮上的内容？

回答

相关问题