在 HTML 文档中,是否可以仅为列表项 (li
) 或有序列表中的项目符号 (ol
) 的编号设置点击事件)?
我希望能够单击该号码,然后进行一些处理。到目前为止,我有两个想法,但希望有其他方法可以使用正常的有序列表来做到这一点:
- 使用 CSS 计数器将数字注入(inject)到我将放置数字的元素中。
- 将透明元素绝对定位在关联列表项内部的数字上。
下面是列表的示例。我希望能够单击显示为 1.
、2.
或 3.
的部分。
HTML 源代码:
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
浏览器中的结果:
1. First Item
2. Second Item
3. Third Item
最佳答案
应用@Fallexe建议但在JS中添加跨度:
[].slice.call (document.querySelectorAll ('ol, ul')).forEach (function (list) {
for (var s, el = list.firstElementChild; el; el = el.nextElementSibling)
el.innerHTML = '<span>' + el.innerHTML + '</span>';
list.addEventListener ('click', function (ev) {
if (ev.target.tagName !== 'SPAN')
for (var el = this.firstElementChild; el; el = el.nextElementSibling)
el.className = el === ev.target ? 'selected' : '';
}, false);
});
参见 fiddle http://jsfiddle.net/jstoolsmith/6nxeT/
关于javascript - 是否可以为有序列表项的编号设置点击事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16866995/