Javascript 在不使用JQuery的情况下将活动类应用于菜单

我已经看到了许多关于如何将类添加到当前页面的答案，但它们都使用JQuery

我的菜单有两个级别，但我只想将该类应用于li标记的第一个级别。因此，在下面的示例中，我希望博客页面2在博客中显示活动

菜单结构：

            <nav id="main_menu">
                <ul>
                    <li><a href="index">HOME</a></li>
                    <li><a href="blog">BLOG</a>
                        <ul>
                            <li><a href="1">1</a></li>
                            <li><a href="2">2</a></li>
                        </ul> 
                        </li>
                    <li><a href="contact">CONTACT</a></li>
                </ul>
            </nav>

顶级李将保持不变，但第二级将发生变化

我可以在不使用数组编号的情况下使用相同的代码，或者只使用ul的子代码而不使用孙子代码吗

---

如何在不使用JQuery的情况下根据我所在的页面使其动态化。有些页面需要将类应用于父li标记

getElementsByTagName

按元素在源代码中的显示顺序返回元素。如果要检索第一级

元素，则可以在现代浏览器中使用以下代码：

var lis = document.getElementById('main_menu').children[0].children;

但是，一些较旧的浏览器（Firefox3及更低版本、Opera9.x、Safari 3.x）不提供

子类

属性。相反，您需要过滤

childNodes

中的项，只将元素节点排序到数组中

• -MDN

---

让我们采取另一种方法：
您真的需要为“主菜单”UL的每个直接子级创建一个类吗？如果它仅用于CSS，您不应该只使用CSS选择器吗

ul#main_menu > li { 
  /* your css here for active LI elements here */
}

---

否则，Andy E的解决方案就可以了。但是我不认为您可以使用编号，大多数浏览器都不支持Javascript中的属性，并且只允许选择元素的直接子元素。
您选择不使用jQuery的原因是什么？如果这个选项可用，你的生活会更轻松。你可以用css来做，对吗？用css来做？我不知道你可以使用CSS应用Calss，但如果你有答案，我想读一读不使用jQuery1的原因2——额外的页面大小。2-试着理解javascript是如何工作的，额外的页面大小不应该真的困扰任何人，因为大量的网站已经在使用jQuery了。如果您从广泛使用的CDN加载它，您的用户的系统上可能已经有了缓存版本。学习普通javascript总是好的；-）阅读代码时，我会认为children[0]是第一个li&lis.setAttribute（“class”，“active”）；我会努力给第一个李这个班。但它似乎不起作用。[0]后面的.children是什么意思？@Jon:

children[0]

将是第一个
元素。该元素的

children

属性将是

元素的列表，因此您可以编写
lis[0]。className='active'
将活动类设置为第一个
。明白了-现在有意义-非常聪明。我阅读它的方式将阻止活动css应用到第二级。如果我将活动类应用于即时消息所在的页面，我会希望执行相反的操作。当孩子处于活动状态时，将css应用于父亲。。。。
ul#main_menu > li { 
  /* your css here for active LI elements here */
}