结合使用 CSS 和 JavaScript 来显示内容 (点击下显示出来)
结合使用 CSS 和 JavaScript 来显示内容
<!DOCTYPE html>
<html>
<head>
<style>
#panel, .flip {
font-size: 16px;
padding: 10px;
text-align: center;
background-color: #4CAF50;
color: white;
border: solid 1px #a6d8a8;
margin: auto;
}
#panel {
display: none;
}
</style>
</head>
<body>
<p class="flip" onclick="myFunction()">点击这里来显示面板</p>
<div id="panel">
<p>该面板包含一个 div 元素,默认情况下该元素是隐藏的(display: none)。</p>
<p>它使用 CSS 进行样式设置,我们使用 JavaScript 来显示它(display: block)。</p>
<p>工作原理:请注意,带有 class="flip" 的 p 元素有 onclick 属性。当用户单击 p
元素时,将执行一个名为 myFunction() 的函数,该函数将 id="panel" 的 div 样式从
display:none(隐藏)更改为 display:block(可见)。</p>
<p>您将在我们的 JavaScript 教程中学到有关 JavaScript 的更多知识。</p>
</div>
<script>
function myFunction() {
document.getElementById("panel").style.display = "block";
}
</script>
</body>
</html>
2、本资源基本为原创,部分来源其他付费资源平台或互联网收集,如有侵权请联系及时处理。
3、本站大部分文章的截图来源实验测试环境,请不要在生产环境中随意模仿,以免带来灾难性后果。
转载请保留出处: www.zh-cjh.com珠海陈坚浩博客 » 结合使用 CSS 和 JavaScript 来显示内容 (点击下显示出来)
作者: cjh
手机扫一扫,手机上查看此文章: |
一切源于价值!
其他 模板文件不存在: ./template/plugins/comment/pc/index.htm