单击HTML元素A并用纯JavaScript在B上添加Class

Click HTML element A and add Class on B with pure JavaScript

本文关键字：添加 Class JavaScript 元素 HTML 单击      更新时间：2023-09-26

我不知道我在这里做错了什么。有人能帮忙吗?

JavaScript: 

function toggleMainNav() {
        var navLink = document.getElementsByClassName('nav_link')[0];
        var mainNav = navLink.nextSibling;
        if ( mainNav.className.match(/(?:^|'s)inactive(?!'S)/) ){
            mainNav.className = 'active';
        } else{
            mainNav.className = 'inactive';
        }
    }
    document.getElementsByClassName('nav_link')[0].addEventListener( 'click' , toggleMainNav );

这是HTML:

<a class="nav_link">☰ Menu</a>
<ul class="inactive">
</ul>

nextSibling将是包含空格的文本节点。要么扫描，直到你得到nodeType === 1或使用nextElementSibling(但检查它是否支持你的目标浏览器)。

旁注:getElementsByClassName的支持比querySelector/querySelectorAall差(例如，IE8有后者，但没有前者)，所以您可以考虑使用它们。

旁注2:IE8也没有addEventListener。

边注3:如果你通过addEventListener连接你的处理程序，在处理程序中this将已经是第一个nav_link，所以你不必再查找它。

旁注4:如果你不给addEventListener第三个参数，一些旧的浏览器会失败(它以前不是可选的)。为了广泛兼容，请确保在末尾包含false。

相关文章：