how to dynamically add a class to nav options in HTML5 page

Question

I have the following include file that creates a menu for my html pages:

function menu(){
    document.write("<nav>");
    document.write('<ul class="nav nav-pills pull-right dynamic-highlight">');
    document.write('<li role="presentation"><a href="index.html">List Widgets</a></li>');
    document.write('<li role="presentation"><a href="create_widget.html">Create Widget</a></li>');
    document.write('<li role="presentation"><a href="create_group.html">Create Widget Group</a></li>')
    document.write('<li role="presentation"><a href="department_widget_list.html">Department Widget List</a></li>')
    document.write('<li role="presentation"><a href="group_membership_list.html">Group Members List</a></li>')
    document.write('<li role="presentation"><a href="site_conf.html">Site Configuration</a></li>')
    document.write('</ul>')
    document.write('</nav>')
}

Each page that includes this menu has code like this:

<head> 
    ... stuff....
    <script type="text/javascript" src="menu_html.js"></script>
</head>
<body>    
<div class="container"><br>
    <div class="header clearfix">
        <script type="text/javascript">
            menu();
        </script>

I've added the following javascript to try find all "

" under the "" in question and then match the name of the href to the current page. The goal is to add the value "active" to the class name. But it's not working Here's the javascript:

    $(document).ready(function() {
        var loc = window.location.pathname;
        loc = loc.substring(1);
        console.log(loc);

        $('.dynamic-highlight').find('a').each(function() {
            console.log($(this).attr('href'))
            $(this).addClass('active', $(this).attr('href') == loc);
            //$(this).addClass("active");
        });

Using the console output, I can see that the current location's page name matches items return by the find method. But the addClass doesn't seem to be working because I don't end up with a highlighted menu item. I've also tried .toggleClass instead of addClass.

EDIT 1

I don't get any errors, but there's no highlighting that appears. So I tried opening the F12 window and using the DOM Explorer, I tried to select the "

" in question that is currently selected. It doesn't have the class="active" set on it.
Just to make sure that "active" is the right class that i want, I hardcoded / changed my include to look like this :

document.write('<li role="presentation" class="active"><a href="index.html">List Widgets</a></li>');

and refresh my page. And I do see the "List widgets" menu item highlighted.

Not sure what else to try...

Possible duplicate of [Dynamically change CSS of link based on current page](https://stackoverflow.com/questions/9863396/dynamically-change-css-of-link-based-on-current-page) — Kurt, May 15 '18 at 20:29

score 1 · Accepted Answer · answered May 15 '18 at 20:59

I would start by changing the menu() function to use a loop to write the links. Then while looping, check the pathname to see if it matches a link, and if so, add the active class to the li. Something like

function menu(){
    var Links = {
        "index.html": "List Widgets",
        "create_widget.html": "Create Widgeth",
        "create_group.html": "Create Widget Group",
        "department_widget_list.html": "Department Widget List",
        "group_membership_list.html": "Group Members List",
        "site_conf.html": "Site Configuration"
    };
    var Class;

    document.write("<nav>");
    document.write('<ul class="nav nav-pills pull-right dynamic-highlight">');

    for (var Page in Links ) {
        if (!Links.hasOwnProperty(Page)) continue;
        Class = window.location.pathname == "/" + Page ? ' class="active"' : '';
        document.write('<li role="presentation"' + Class + '><a href="' + Page + '">' + Links[Page] + '</a></li>');

    }
    document.write('</ul>')
    document.write('</nav>')
}

Ali Sheikhpour · Answer 2 · 2018-05-15T20:55:55.270

0

If you don't have complex architecture and there are no files in different folders with similar names, you can rely on window.location.pathname to compare with anchor href attribute:

$(document).ready(function(){
   var pathname = (window.location.pathname).replace("/","");
   $("li[role='presentation']")
   .children("a[href*='"+ pathname+ "']")
   .parent()
   .addClass("active");
})

edited May 15 '18 at 20:55

answered May 15 '18 at 20:48

Ali Sheikhpour

10,475
5
41
82

Ali that's not working either. No errors. Please see edit 1 – dot May 15 '18 at 20:51
I get all anchors and then filter them by conditions and then set "active' class to their parent `li` – Ali Sheikhpour May 15 '18 at 21:01
You added class active to children anchors instead of their parents `li` @dot – Ali Sheikhpour May 15 '18 at 21:03

how to dynamically add a class to nav options in HTML5 page

2 Answers2