HTML5 是一种用于构建网页的标准标记语言，它提供了丰富的元素和属性来控制网页的结构和样式，在 HTML5 中，我们可以使用各种方法来隐藏或显示 <li>（列表项）元素，以下是一些常用的方法：
1、使用 CSS 隐藏或显示 <li> 元素
我们可以使用 CSS 的 display 属性来控制 <li> 元素的显示和隐藏。display 属性有四个值：block、inline、none 和 inline-block，默认情况下，<li> 元素的 display 属性值为 block，这意味着它会以块级元素的形式显示，要将 <li> 元素隐藏，可以将 display 属性设置为 none；要显示 <li> 元素，可以将 display 属性设置为 block。
示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
li {
display: none; /* 隐藏 <li> 元素 */
}
</style>
</head>
<body>
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
<button onclick="showLi()">显示列表项</button>
<script>
function showLi() {
var liElements = document.getElementsByTagName('li');
for (var i = 0; i < liElements.length; i++) {
liElements[i].style.display = 'block'; /* 显示 <li> 元素 */
}
}
</script>
</body>
</html>
2、使用 JavaScript 隐藏或显示 <li> 元素
除了使用 CSS，我们还可以使用 JavaScript 来控制 <li> 元素的显示和隐藏，JavaScript 提供了 style.display 属性来设置元素的显示方式，要将 <li> 元素隐藏，可以将 style.display 属性设置为 none；要显示 <li> 元素，可以将 style.display 属性设置为 block。
示例代码：
<!DOCTYPE html>
<html>
<head>
<script>
function hideLi() {
var liElements = document.getElementsByTagName('li');
for (var i = 0; i < liElements.length; i++) {
liElements[i].style.display = 'none'; /* 隐藏 <li> 元素 */
}
}
</script>
</head>
<body onload="hideLi()">
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
</body>
</html>
3、使用伪类选择器隐藏或显示 <li> 元素
CSS3 引入了伪类选择器，它们允许我们根据元素的状态或位置来选择元素，我们可以使用 :hover 伪类选择器来选择鼠标悬停在其上的元素，要将 <li> 元素隐藏，可以使用 :not() 伪类选择器结合 :hover 伪类选择器；要显示 <li> 元素，可以使用 :hover 伪类选择器。
示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
ul li:not(:hover) { /* 隐藏未悬停的 <li> 元素 */
display: none;
}
</style>
</head>
<body>
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
</body>
</html>
4、使用 JavaScript 事件监听器隐藏或显示 <li> 元素
我们可以使用 JavaScript 的事件监听器来监听用户的操作，如点击、双击等，当用户执行某个操作时，我们可以调用相应的函数来控制 <li> 元素的显示和隐藏，我们可以为按钮添加一个点击事件监听器，当用户点击按钮时，调用一个函数来切换 <li> 元素的显示和隐藏状态。
示例代码：
<!DOCTYPE html>
<html>
<head>
<script>
var isHidden = true; /* 初始状态为隐藏 */
function showLi() { /* 显示 <li> 元素的函数 */
var liElements = document.getElementsByTagName('li');
for (var i = 0; i < liElements.length; i++) {
liElements[i].style.display = 'block'; /* 显示 <li> 元素 */
isHidden = false; /* 更新状态 */
}
}
function hideLi() { /* 隐藏 <li> 元素的函数 */
var liElements = document.getElementsByTagName('li');
for (var i = 0; i < liElements.length; i++) {
liElements[i].style.display = 'none'; /* 隐藏 <li>
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/377611.html
微信扫一扫 