通过事件委托实现点击li时alert出相应的索引和内容。 <ul> <li>苦心人</li> <li>天不负</li> <li>卧薪尝胆</li> <li>三千越甲可吞吴</li> </ul>
时间: 2023-05-25 13:05:00 浏览: 76
// 获取ul元素
const ul = document.querySelector('ul');
// 使用事件委托给ul添加点击事件
ul.addEventListener('click', function(e) {
if(e.target.nodeName === 'LI') {
// 获取点击的li元素的索引和内容
const index = Array.from(ul.children).indexOf(e.target);
const content = e.target.textContent;
// 弹出提示框
alert(`点击的是第${index}个li,内容为${content}`);
}
})
相关问题
<div class="heard"> <ul> <li>美洲</li> <li>欧洲</li> <li>亚洲</li> <li>海岛</li> <li>美洲</li> </ul> </div>如何为以上标签添加超链接
要为以上标签添加超链接,可以在每个 `<li>` 标签内部使用超链接标签 `<a>`,并设置 `href` 属性来指定链接的地址,如下所示:
```
<div class="heard">
<ul>
<li><a href="http://www.example.com/america">美洲</a></li>
<li><a href="http://www.example.com/europe">欧洲</a></li>
<li><a href="http://www.example.com/asia">亚洲</a></li>
<li><a href="http://www.example.com/island">海岛</a></li>
<li><a href="http://www.example.com/america">美洲</a></li>
</ul>
</div>
```
这样,每个列表项就会成为一个超链接,用户点击列表项时就会跳转到对应的链接地址。
<ul > <li></li> <li class="one"></li> <li></li> <li></li>改写这段,使小圆点在一行
将样式表中的`.a`和`.b`的`display`属性改为`inline-block`即可实现小圆点在一行显示。修改后的代码如下所示:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a {
display: inline-block;
list-style-type: square;
}
.b {
display: inline-block;
list-style-type: circle;
}
</style>
</head>
<body>
<ul>
<li class="a">星期日</li>
<li class="b"></li>
<li class="a">星期一</li>
<li class="b"></li>
<li class="a">星期二</li>
<li class="b"></li>
<li class="a">星期三</li>
<li class="b"></li>
<li class="a">星期四</li>
<li class="b"></li>
<li class="a">星期五</li>
<li class="b"></li>
<li class="a">星期六</li>
</ul>
</body>
</html>
```