基于页面动态添加类

Question

我有一个用 bootstrap css 编写的导航列表：

<ul class="nav navbar-nav navbar-right">
    <li class=""><a href="index.html">Home</a></li>
    <li class=""><a href="about.html">About</a></li>
                </ul>

我的问题是如何使用 javascript 将“active”类添加到使用 javascript 的“li”标签中？我希望它在 index.html 上拥有 home 类的活动类，对于 about.html 也是如此

这可能吗？

Answer 1

它不干净，可能有更好的方法，但是：

HTML

<ul class="nav navbar-nav navbar-right">
    <li id="navIndex" class=""><a href="index.html">Home</a></li>
    <li id="navAbout" class=""><a href="about.html">About</a></li>
</ul>

JS（某处）

// Map ids with html page names
var pages = { 
    navIndex: "index.html",
    navAbout: "about.html"
};

// Iterate over map
for(var property in pages) {

    // Check to make sure that the property we're iterating on is one we defined
    if(pages.hasOwnProperty(property)) {

        // indexOf will be 0+ if it appears in the string
        if(window.location.href.indexOf(pages[i]) > -1) {

            // we can use property because we defined the map to be same as ids
            // From https://stackoverflow.com/questions/2739667/add-another-class-to-a-div-with-javascript
            var el = document.getElementById(property);
            el.className += el.className ? ' active' : 'active';
            break; // no need to keep iterating, we're done!
        }
    } 
}

这或多或少是一种“肮脏”的方法，因为它需要的不仅仅是 JavaScript 才能工作（see Nick's answer 用于更简洁的实现）。

首先我们在 <li> 元素上设置标识符，然后我们将这些标识符与它们各自的 href 属性映射出来。

一旦我们映射出<li>s，我们就会遍历映射的键（我们将其设置为<li>s 上的id 属性）并检查href 属性是否存在于其中该站点的window.location.href，如果是：添加active 类并停止搜索，否则我们继续运输。

Answer 2

JavaScript

var siteList = document.URL.split("/");
var site = siteList[siteList.length - 1];
var list = document.getElementsByTagName("li");
for (var index = 0; index < list.length; index++) {
    var item = list[index];
    var link = item.firstElementChild;
    var href = link ? String(link.href) : "-";
    if (href.replace(".html","") === site) {
        item.classList.add("open");
    } else {
        item.classList.remove("open");
    }
}

说明

您可以使用document.URL 获取当前的URL，您可能只需要最后一部分，因此您必须拆分它并获取最后一部分，在您的情况下为index，@ 987654325@等

然后获取所有li 元素并遍历它们。 如果他们没有a 孩子，请忽略它。 如果他们确实获得了href 属性并在最后删除.html。 如果该文本与site variable 相同，则意味着您应该打开该元素，否则关闭它。