how to highlight index nav link when on root page

Question

So there's one web design project I'm working on, and I've run into a bit of a problem I've been trying to resolve. I've been working on highlighting different nav links based on url of current page. It works on every page I've been working on except for the index page when you land to that page through root link. Even knowing the issue may seems minor if everything else works, but it does bother me a little, hey, I like a good challenge though. I've been trying to set it up in jquery so the index link get highlighted whenever someone is at the root links but I've had no success. I'm also out of ideas on what to try. If anyone can give me help that would be great.

Here's all the relevant pieces of code

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

    nav.main ul li a.orange:hover
    {
    border-bottom: 5px solid #5ee9ef;;
    transition: 295ms ease;
    }

    nav.main ul li a.aorange
    {
    border-bottom: 5px solid #5ee9ef;
    }

    nav.main ul li a.purple:hover
    {
    border-bottom: 5px solid #9648a5;
    transition: 295ms ease;
    }

    nav.main ul li a.apurple
    {
    border-bottom: 5px solid #9648a5;
    }

jQuery :

$(function () {

    $('nav.main ul li a[href="index.html' + location.pathname.split("index.html")[1] + '"]').addClass('apink');

    $('nav.main ul li a[href="about.html' + location.pathname.split("about.html")[3] + '"]').addClass('aorange');

    $('nav.main ul li a[href="contact.html' + location.pathname.split("contact.html")[4] + '"]').addClass('apurple');

    $('nav.main ul li a[href="index.html' + location.pathname.split("schedule.html")[5] + '"]').addClass('apink');

    $('nav.main ul li a[href="contact.html' + location.pathname.split("thanks.html")[6] + '"]').addClass('apurple');


});

Answer 1

在您的根页面内，将类添加到index.html锚元素

$("nav.main ul li a:first-child").addClass('apink');

Answer 2

try this code by Jonathan Snook

/*
CLCP v2.1 Clear Links to Current Page
Jonathan Snook
This code is offered unto the public domain
http://www.snook.ca/jonathan/
*/

window.onload = clearCurrentLink;

function clearCurrentLink(){
    var a = document.getElementsByTagName("A");
    for(var i=0;i<a.length;i++) if(a[i].href="=" window.location.href.split("#")[0])="" removenode(a[i]);="" }="" function="" removenode(n){="" if(n.haschildnodes())="" gets="" the="" text="" from="" link="" and="" moves="" it="" to="" previous="" node.="" for(var="" i="0;i<n.childNodes.length;i++)" {="" var="" strong="document.createElement('strong');" label="n.childNodes[i].cloneNode(true);" strong.appendchild(label);="" n.parentnode.appendchild(strong);="" n.parentnode.removechild(n);="" <="" pre="">
</a.length;i++)>