通过事件委托实现点击li时alert出相应的索引和内容。 <ul> <li>苦心人</li> <li>天不负</li> <li>卧薪尝胆</li> <li>三千越甲可吞吴</li> </ul> js
时间: 2023-05-25 09:05:02 浏览: 36
var ul = document.querySelector('ul');
ul.addEventListener('click', function(event) {
if (event.target.tagName === 'LI') { // 判断点击目标是否为li元素
var index = Array.prototype.indexOf.call(ul.children, event.target); // 获取索引
var content = event.target.textContent; // 获取内容
alert('索引:' + index + ',内容:' + content);
}
});
相关问题
通过事件委托实现点击li时alert出相应的索引和内容。 <ul> <li>苦心人</li> <li>天不负</li> <li>卧薪尝胆</li> <li>三千越甲可吞吴</li> </ul>
可以的,您可以使用以下代码实现:
```html
<ul id="myList">
<li>苦心人</li>
<li>天不负</li>
<li>卧薪尝胆</li>
<li>三千越甲可吞吴</li>
</ul>
<script>
const myList = document.getElementById("myList");
const listItems = myList.getElementsByTagName("li");
for(let i = 0; i < listItems.length; i++) {
listItems[i].addEventListener("click", function() {
alert(`索引为${i},内容为${listItems[i].textContent}`);
})
}
</script>
```
以上代码会为每个li标签添加一个点击事件,当点击时会alert出该li标签的索引和内容。
<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>
```
这样,每个列表项就会成为一个超链接,用户点击列表项时就会跳转到对应的链接地址。