点击按钮显示或隐藏Div块
程序员文章站
2022-05-05 19:10:07
...
通过点击按钮实现Div块在显示状态与隐藏状态之间来回切换。
代码如下:
方法一:
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("#div1").toggle();
});
});
</script>
</head>
<body>
<h3>点击按钮显示或隐藏Div块</h3>
<button type="button">按钮</button>
<div id="div1" style="border:2px solid #ff0000">
再点击一下按钮我就会隐藏起来.
</div>
</body>
</html>
方法二:
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
function showOrHide(){
var div = $("#div1").get(0);
if(div.style.display == ""){
div.style.display = "none";
}else{
div.style.display = "";
}
}
</script>
</head>
<body>
<h3>点击按钮显示或隐藏Div块</h3>
<button onclick="showOrHide()" type="button">按钮</button>
<div id="div1" style="display: none;border:2px solid #ff0000;">
再点击一下按钮我就会隐藏起来.
</div>
</body>
</html>
效果如下:
上一篇: 微信小程序使用animation动画实现消息从左向右滚动
下一篇: binary_search