JavaScript 实现显示和隐藏 div 方法有多种方式，这里我为大家总结了一些常见的实现方式。
方式一：使用display属性来控制div的显示和隐藏
可以通过设置div的style.display属性来显示或隐藏这个div元素。下面是示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Display div using JavaScript</title>
<script>
function showDiv() {
// 获取需要显示的div元素
var div = document.getElementById("myDiv");
// 设置display属性为block，使元素显示出来
div.style.display = "block";
}
function hideDiv() {
// 获取需要隐藏的div元素
var div = document.getElementById("myDiv");
// 设置display属性为none，使元素隐藏起来
div.style.display = "none";
}
</script>
</head>
<body>
<button onclick="showDiv()">Show Div</button>
<button onclick="hideDiv()">Hide Div</button>
<div id="myDiv" style="display:none;">
This is my div!
</div>
</body>
</html>
该示例代码中定义了showDiv和hideDiv两个函数来控制div的显示和隐藏。当点击"Show Div"按钮时，将会显示id为"myDiv"的div元素；当点击"Hide Div"按钮时，将会隐藏该元素。
方式二：使用jQuery的show()和hide()方法
使用jQuery的show()和hide()方法可以更加简便地实现div的显示和隐藏。下面是示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Display div using jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#show").click(function(){
$("#myDiv").show();
});
$("#hide").click(function(){
$("#myDiv").hide();
});
});
</script>
</head>
<body>
<button id="show">Show Div</button>
<button id="hide">Hide Div</button>
<div id="myDiv" style="display:none;">
This is my div!
</div>
</body>
</html>
该示例代码中引入了jQuery库，并定义了一个匿名函数。在该函数中，通过使用jQuery选择器来获取div元素，并使用show()和hide()方法来显示和隐藏该元素。
以上就是Javascript实现显示和隐藏div方法汇总的两种方式，希望对您有所帮助。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript实现显示和隐藏div方法汇总 - Python技术站
微信扫一扫 
支付宝扫一扫 