显示隐藏的html代码的按钮？答案

【问题标题】：Button to display html code that is hidden?显示隐藏的html代码的按钮？
【发布时间】：2019-07-15 12:59:00
【问题描述】：

我想知道一旦用户单击 html/jsp 网站上的按钮，是否有可能在同一页面上出现某些内容？所以基本上一些文本是隐藏的，直到单击按钮然后它才会出现？我是网络开发新手，所以不确定这是否可能，谢谢

【问题讨论】：

看看jquery的隐藏和显示功能
当然可以。重新加载页面（即将一些信息发送到服务器并根据需要重新呈现页面）或通过 JavaScript 更改 DOM。有很多关于这两种方法的教程。
这是基本要求。看看 CSS 和 display-attribute。您可以使用任何 JS 框架或手动设置。

【解决方案1】：

使用 JavaScript 切换元素的 display 样式属性：

const display = () => document.querySelector('#elt').style.display = 'block';
const hide = () => document.querySelector('#elt').style.display = 'none';

<button onclick="display()">Display</button>
<button onclick="hide()">Hide</button>
<div id="elt">Hello world</div>

【讨论】：

【解决方案2】：

您可以使用 Jquery 在您的页面上动态显示和隐藏元素。我建议你看看它
https://jsfiddle.net/rxnfwzoj/1/
这是.hide()和.show()函数的一个小例子

【讨论】：

在我看来，仅仅为了显示/隐藏而使用整个 jQuery 是一种矫枉过正的做法。查看VanillaJS ;)
jep，完全是。可能是一个只有纯 js 的人，就像在 nino 的 awnser 中看到的那样，但我只是喜欢 jquery 哈哈，但你是对的

【解决方案3】：

显示隐藏的 html 代码的按钮。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<body>
    <button id="showContent" >
Click Me to Show Content
</button>
<button id="hideContent" style="display:none" >
Click Me to Hide Content
</button>
    <div id="hiddenId" style="display:none">Welcome Dear!</div>
</body>
<script >

$("#showContent").click(function(){
    $("#hideContent").show();
    $("#showContent").hide();

$("#hiddenId").show();
});
$("#hideContent").click(function(){
    $("#showContent").show();
    $("#hideContent").hide();
$('#hiddenId').hide();
});
</script>
</html>

【讨论】：