当li标签为空时div隐藏,当li标签里不为空是,显示
时间: 2024-03-21 11:38:49 浏览: 13
可以使用 JavaScript 或者 jQuery 实现。
JavaScript 实现:
```html
<ul id="myList">
<li></li>
</ul>
<div id="myDiv">这是一个div</div>
<script>
var list = document.getElementById("myList");
var div = document.getElementById("myDiv");
if (list.innerHTML.trim() === "") {
div.style.display = "none";
} else {
div.style.display = "block";
}
</script>
```
jQuery 实现:
```html
<ul id="myList">
<li></li>
</ul>
<div id="myDiv">这是一个div</div>
<script>
var list = $("#myList");
var div = $("#myDiv");
if (list.html().trim() === "") {
div.hide();
} else {
div.show();
}
</script>
```
上述代码中,我们首先获取到包含 `li` 标签的 `ul` 元素和需要控制显示隐藏的 `div` 元素。然后,判断 `ul` 元素内的 `li` 标签是否为空,如果为空则隐藏 `div` 元素,否则显示 `div` 元素。注意,我们使用了 `innerHTML` 或者 `html()` 方法获取 `ul` 元素内的 HTML 内容,并使用 `trim()` 方法去除空格。最后,我们使用 `style.display` 属性或者 `hide()`/`show()` 方法来控制 `div` 元素的显示或隐藏。