Dynamically add class based on page

Question

I have a navagation list written with 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>

My question is how can I use javascript to add the class "active" to the "li" tags using javascript? I want it to have the active class on index.html for home and the same for about.html

Is this possible?

check this: http://stackoverflow.com/questions/20060467/add-active-navigation-class-based-on-url — tech2017, May 16 '17 at 20:17
Possible duplicate of [Add Active Navigation Class Based on URL](http://stackoverflow.com/questions/20060467/add-active-navigation-class-based-on-url) — chazsolo, May 16 '17 at 20:25

nick zoum · Accepted Answer · 2017-05-16T20:33:27.090

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");
    }
}

Explanation

You can get the current URL using document.URL, you probably want the just the last part, so you'll have to split it and get the last part, which in your case will be index, about etc.

Then get all the li elements and iterate through them. If they don't have an a child then ignore it. If they do get the href attribute and remove the .html at the end. If that text is the same as the site variable, then that means you should open the element, otherwise close it.

score 0 · Answer 2 · edited May 23 '17 at 10:31

It's not clean, and there's probably a better way to do it, but:

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 (somewhere)

// 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!
        }
    } 
}

This is more or less a "dirty" approach because it requires more than just JavaScript to get to work (see Nick's answer for a cleaner implementation).

First we set identifiers on our <li> elements, then we map out those identifiers with their respective href attributes.

Once we have the <li>s mapped out, we then iterate over the map's keys (which we set to be the id attributes on our <li>s) and check if the href attribute is present within the site's window.location.href, if it is: add the active class and stop searching, otherwise we keep on trucking.

Dynamically add class based on page

2 Answers2

JavaScript

Explanation