显示隐藏的html代码的按钮？
Posted
技术标签:
【中文标题】显示隐藏的html代码的按钮？【英文标题】：Button to display html code that is hidden? 【发布时间】：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>
【讨论】：
以上是关于显示隐藏的html代码的按钮？的主要内容，如果未能解决你的问题，请参考以下文章