Forgive me for my lack of expertise in Javascript. I will do my best to explain clearly.
On my website, I have an external html file for the navigation menu that is loaded with javascript to simplify editing (so I don't need to update nav elements on every page). To insert the nav menu, I used this script:
<script>
$(function(){
$("#nav").load("nav.html");
});
</script>
This script, along with the div below, successfully loads nav.html without any issues.
<div id="nav"></div>
Now, I want to add a unique style to the current link (the link corresponding to the current page). After extensive research, I found the following script as the best solution:
<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, this script only works if the link is directly written into the main html file and not when it is loaded from an external html file. Here is a snippet from 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, these links are already styled based on settings from the css file provided below:
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 styled differently with the following specifications:
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 contain script in the header, including a link to jQuery.js 1.11.0, but the external html navigation file does not.
If you require further clarification, please feel free to reach out. Thank you!