Change colour of selected

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?

Change the background of the element when its inner `` has a `href` attribute that matches the current `window.location.href`. — Terry, Feb 11 '20 at 14:09

Nemoko · Answer 1 · 2020-02-11T14:46:59.437

2

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>

edited Feb 11 '20 at 14:46

answered Feb 11 '20 at 14:15

Nemoko

421
4
13

1

Nemoko, this is a correct solution. However this is bad practice and needs a lot of work to maintain it (example: When adding a new item). Also maybe this persons includes the same navigation which would make your solution incorrect. However, i'm going to upvote because it's nicely formulated :) – Wimanicesir Feb 11 '20 at 14:19
Thanks for the suggestion, however the issue is this - of course I can manually add a css class to the elements and it would change its colour, but I need this to happen automatically as the user navigates my site by clicking the list items, I cannot manually add classes to the list items as the user clicks them in real time, does that make sense? I believe it has to happen by using some sort of JavaScript. – Kyle_Pearce Feb 11 '20 at 14:24
Programming is not about copy-pasting code and adding a case for every scenario, specially when working with *N* - but to derive a logical process that can handle an indefinite number of cases - with a special exception for index page (which does not necessarily contain the `"index"` string) – Roko C. Buljan Feb 11 '20 at 15:18

score 2 · Answer 2 · answered Feb 11 '20 at 14:38

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!

Kyle_Pearce · Answer 3 · 2020-02-11T21:20:24.273

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.

Change colour of selected

3 Answers3

Linked