Question

我有以下HTML：

<ul class="m_nav_tier m_nav_tier1">
    <li data-nav-tier="1">a</li>
    <li data-nav-tier="1">a</li>
    <li data-nav-tier="1">a</li>
    <li data-nav-tier="1">a</li>
    <li data-nav-tier="1">a</li>
</ul>

使用javascript，当用户点击任何LI时，如何实现代码向UL添加类？

这需要仅使用Javascript，而不是jQuery。

Answer 1

演示：https://jsfiddle.net/mx6c2um7/1/

var ul = document.body.getElementsByClassName('m_nav_tier')[0];
ul.addEventListener('click',function(e) {
    if(e.target.tagName == 'LI') {
        ul.classList.add('yourClassName');
    }
});

每行解释：

var ul = document.body.getElementsByClassName('m_nav_tier')[0];

^从DOM中获取UL元素（必须在列表插入网页后运行）

ul.addEventListener('click',function(e) { ... });

^侦听整个UL元素上的点击事件（也会监听我们将利用的子元素点击）

if(e.target.tagName == 'LI') { .. }

^检查我们按下的元素是否是我们UL中的LI元素

ul.classList.add('yourClassName');

^使用DOMelements的classList属性添加新类

单击LI时将类添加到UL

1 个答案: