0

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

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

菜单结构：

            <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>

我得到了这个工作，但它使用总是会改变的数组编号。 

var node = document.getElementById("main_menu").getElementsByTagName("li")[0];
node.setAttribute("class", "active");

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

我可以在没有数组编号的情况下执行相同的代码，或者只使用没有孙子的 ul 的儿子吗？

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

4

2 回答 2

1

getElementsByTagName按元素在源代码中出现的顺序返回元素。如果要检索第一级<li>元素，则可以在现代浏览器中使用以下代码：

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

但是，一些较旧的浏览器（Firefox 3 和更低版本、Opera 9.x、Safari 3.x）不提供该children属性。相反，您需要过滤 中的项目childNodes，仅将元素节点排序到数组中。

于 2013-07-22T13:42:07.837 回答
0

让我们采取另一种方法：

您真的需要为“main_menu” UL 的每个直接子级开设课程吗？如果它只用于 CSS，你不应该只使用 CSS 选择器吗？

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

否则，Andy E 的解决方案将完成这项工作。但我不认为你可以得到编号，大多数浏览器都支持 Javascript 中没有属性，并且只允许选择元素的直接子元素。

于 2013-07-22T13:48:05.350 回答