div包裹着ul标签,当ul标签里的li标签为空就隐藏div 当ul里的li标签不为空,就显示div 通过js表达 请显示完整代码
时间: 2024-03-21 08:39:32 浏览: 15
好的,以下是完整的HTML代码和JavaScript代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Hide/Show Div based on List Content</title>
<style type="text/css">
#myDiv {
background-color: #f2f2f2;
padding: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="myDiv">
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<script type="text/javascript">
var myList = document.getElementById("myList");
var myDiv = document.getElementById("myDiv");
if (myList.innerHTML === "") {
myDiv.style.display = "none";
} else {
myDiv.style.display = "block";
}
</script>
</body>
</html>
```
在上面的代码中,我们使用了CSS样式将div元素进行了一些样式上的修饰,使其看起来更加美观。然后在JavaScript中,我们获取了ul和div的DOM元素,然后判断ul元素中的innerHTML是否为空,如果为空,则将div元素的display属性设置为“none”,否则将其设置为“block”。最后,将JavaScript代码放在了页面底部,保证在DOM元素加载完成后再执行。