Currently, there is a web design project that I am tackling and have encountered a slight hiccup that needs resolving. The issue revolves around highlighting different navigation links based on the URL of the current page. This functionality works seamlessly on all pages except for the index page accessed through the root link. While this might seem like a minor problem in the grand scheme of things, it's been nagging at me as I strive for perfection. I attempted to address this using jQuery to ensure that the index link is highlighted when someone lands on the root link, but unfortunately, my efforts have been futile. At this point, I'm feeling a bit stuck and could really use some guidance.
Below are all the pertinent code snippets:
HTML:
<nav class="main">
<ul>
<li><a href="index.html" class="pink">Home</a></li>
<li><a href="about.html" class="orange">About</a></li>
<li><a href="contact.html" class="purple">Contact</a></li>
</ul>
</nav>
CSS:
nav.main ul li a
{
color: #000000;
font-size: 1.57em;
padding: 0.1em 1.5em;
padding-top: 0.3em;
border-bottom: 5px solid transparent
}
nav.main ul li a.pink:hover
{
border-bottom: 5px solid #d9618f;
transition: 295ms ease;
}
nav.main ul li a.apink
{
border-bottom: 5px solid #d9618f;
}
(CSS for orange and purple classes omitted for brevity)
jQuery:
$(function () {
$('nav.main ul li a[href="index.html' + location.pathname.split("index.html")[1] + '"]').addClass('apink');
('jQuery selectors for about and contact pages omitted for brevity')
});