Change colour of selected <li>

Question

I have the following HTML code:

 <div class="MenuContainer"> <div class="Menu"> <div class="MenuContents"> <ul> <li><a href="index.html">Home</a></li> <li><a href="gamePage.html">Game</a></li> <li><a href="gameDesignPage.html">Game Design</a></li> <li><a href="devRolesPage.html">Developer Roles</a></li> <li class="float-right"><a href="about.html">About</a></li> </ul> </div> </div> </div>

How can I make it so that when one of the list items is selected the background colour changes even after the href loads the new selected page therefore making it clear to the user what page they are on?

I have read many answers to similar stack overflow questions that generally use JQuery to add a css class to the html list item or anchor when clicked that changes the colour but it does not work for me, I feel like because the href changes the page (loads a new page) everything is reset each time I select a list item and the colour never changes or perhaps only does so for a split second and I cant notice it?

Answer 1

Since I can't comment (Don't have 50 rep points yet) I'll make it as an answer with what I think what you are trying to achieve.

You want the page that is currently active to have a different background color? why not add a class to the active page he is on?

For example:

js

var pathname = window.location.pathname;
switch(pathname) {
   case "/index" :
       var active = document.getElementById("Home");
       active.ClassName += " Active";
       break;
   case "/gamePage" :
       var active = document.getElementById("GamePage");
       active.ClassName += " Active";
       break;
}

css

.Active{
   background-color: black;
}

html

                <li><a id="Index" href="index.html">Home</a></li>
                <li><a id="GamePage" href="gamePage.html">Game</a></li>
                <li><a id="GameDesignPage" href="gameDesignPage.html">Game Design</a></li>
                <li><a id="DevRolesPage" href="devRolesPage.html">Developer Roles</a></li>
                <li id="About" class="float-right"><a href="about.html">About</a></li>

Answer 2

First you need the pathname of the url. I also delete the leading slash:

var path = window.location.pathname.substring(1);

If you have .html in your files, replace it by using substring again:

path = path.substring(0, path.length - 5);

To achieve an easy way for javascript, add id's with the same name to your a links

<a id="index" href="index.html">Home</a>

Now mix them together:

var activeLink = document.getElementById(path);

Now add the active class you want:

activeLink.classList.add("active");

Hope this helps!

Answer 3

Based on the answer from Wimanicesir, I have managed to solve the issue.

I now have the html code:

<div class="MenuContainer">
    <div class="Menu">
        <div class="MenuContents">
            <ul>
                <li><a id="index" href="index.html" >Home</a></li>
                <li><a id="gamePage" href="gamePage.html" >Game</a></li>
                <li><a id="gameDesignPage" href="gameDesignPage.html" >Game Design</a></li>
                <li><a id="devRolesPage" href="devRolesPage.html" >Developer Roles</a></li>
                <li class="float-right"><a id="about" href="about.html" >About</a></li>
            </ul>
        </div>
    </div>
</div>

and the javascript:

$(document).ready(function () {
    var path = window.location.pathname.substring(1);
    path = path.substring(0, path.length - 5);
    var pathShort = path.substring(path.indexOf("/")+1);
    var activeLink = document.getElementById(pathShort);
    activeLink.classList.add("active");
});

And this now works, thanks for the push in the right direction Wimanicesir.