use javascript to style current links residing in an external html file

Question

Apologies in advance. I am new to Javascript. I will try to be as clear as possible.

I have a website with an external html file for the navigation menu, loaded with javascript to make editing easier (so I don't have to change nav elements on every page). To insert the nav menu, I used the following script:

<script>
$(function(){
$("#nav").load("nav.html");
});
</script>

This script, plus the div below, loads nav.html without any problems.

<div id="nav"></div>

Next, I want to give a unique style to the current link (in other words, the link associated with the current page). After searching high and low, the best solution I have found is the following script:

<script>
$(document).ready(function(){
var str=location.href.toLowerCase();
$("a").each(function() {
if (str.indexOf(this.href.toLowerCase()) > -1) {
$("a").removeClass("current");
$(this).addClass("current");
}
});
})
</script>

However, it only works if the link is written into the main html file, not when it is loaded from an external html file. Here is part of the external nav.html file:

<a class="nav-link" href="projects/senseofspace" target="_top">Sense of Space</a>
<a class="nav-link" href="projects/gsac" target="_top">GSAC Accessibility</a>
<a class="nav-link" href="projects/jonahecologycenter" target="_top">Jonah Ecology Center</a>

As you can see, the links are already styled with the below settings from the css file:

a.nav-link:link {display:block; padding-left:5px; text-decoration:none; color:rgb(210,210,210);}
a.nav-link:visited {display:block; padding-left:5px; text-decoration:none; color:rgb(210,210,210);}
a.nav-link:active {display:block; padding-left:5px; text-decoration:none; color:black; background-color:white;}
a.nav-link:hover {display:block; padding-left:5px; text-decoration:none; color:black; background-color:white;}
a.nav-link {position:relative; display:block; left:10px; line-height:150%;}

I want the "current" link to be re-styled with the following:

a.current:link {display:block; padding-left:5px; text-decoration:none; color:black; background-color:white;}
a.current:visited {display:block; padding-left:5px; text-decoration:none; color:black; background-color:white;}
a.current:active {display:block; padding-left:5px; text-decoration:none; color:black; background-color:white;}
a.current:hover {display:block; padding-left:5px; text-decoration:none; color:black; background-color:white;}
a.current {position:relative; display:block; left:10px; line-height:150%;}

The main html files all have script written into the header, including a link to jQuery.js 1.11.0. The external html navigation file does not.

Please let me know if you need further clarification. Thanks!

Answer 1

You need to call these .each(), .addClass(), etc. after the new HTML elements have been added to the dom.

Try this:

$( "#nav" ).load( "nav.html", function() {
    var str=location.href.toLowerCase();
    $("a").each(function() {
        if (str.indexOf(this.href.toLowerCase()) > -1) {
            $("a").removeClass("current");
            $(this).addClass("current");
        }
    });
});