html中li怎么选中
时间: 2024-01-21 13:19:42 浏览: 139
要选中HTML中的li元素,可以使用CSS中的:active伪类或者JavaScript来实现。
使用CSS的:active伪类可以为选中的li元素添加样式,如下所示:
```css
li:active {
background-color: yellow;
}
```
这样当用户点击li元素时,就会将其背景色设置为黄色。
使用JavaScript可以通过获取li元素的引用,然后修改其样式来实现选中效果,如下所示:
```html
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
```
```javascript
// 获取li元素的引用
var listItems = document.querySelectorAll('#myList li');
// 遍历所有li元素,为其添加点击事件
for (var i = 0; i < listItems.length; i++) {
listItems[i].addEventListener('click', function() {
// 移除所有li元素的选中样式
for (var j = 0; j < listItems.length; j++) {
listItems[j].classList.remove('selected');
}
// 为当前点击的li元素添加选中样式
this.classList.add('selected');
});
}
```
这样当用户点击li元素时,该元素就会被添加上selected类,从而实现选中效果。
阅读全文