Question

我想知道，用户单击html / jsp网站上的按钮是否有可能在同一页面上显示某些内容？因此，从本质上讲，某些文本一直被隐藏，直到单击按钮，然后该文本才会出现？我是Web开发人员的新手，所以不确定是否有可能，谢谢

Answer 1

显示隐藏的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>

Answer 2

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

Answer 3

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

按钮显示隐藏的html代码？

3 个答案: