Toggling class based on click of link

Question

I have a navbar like this:

Here is the relevant navbar HTML:

        <div class = "navbar">
            <a class = "active" href ="{% url 'keiji-home' %}">home</a>
            <a href ="#" onclick = "makeActiveLink('communities-tag')"
            id="communities-tag">
                communities
            </a>
            <a href = "#">feeling lucky</a>
            <a href = "{% url 'keiji-about' %}">about</a>
            <div class = "navbar--right">
                <a href = "{% url 'register' %}">login/signup</a>
            </div>
            
        </div>

I want to have the red background (class = "active") on the link (such as "home","communities","feeling lucky",...) when I am on that page. Ie: when on "about", the red background would be on about.

I am new to JS: here is my attempt so far from looking at other questions:

    function makeActiveLink(id)
    {
        var selectedLink = document.getElementById(id);
        selectedLink.classList.className += "active";
    }

Then on the link, for example "communities":

<a href ="#" onclick = "makeActiveLink('communities-tag')"
            id="communities-tag">

However, this is not correct.

Furthermore, I would like the "active" class to be removed from the previous link, ie when going from "home" to "about", the class should be removed from "home" and put on "about".

Not sure if this helps, but I am using Django (again new to that) to run this site.

Answer 1

This is what you are possibly trying to achieve:

function makeActiveLink(obj)
{
    var links = document.getElementsByName("nav");
    links.forEach(function(item) { item.classList.remove("active"); }
    obj.classList.add("active");
}

And then in html:

<a href ="#" onclick = "makeActiveLink(this)" name="nav">home</a>
<a href ="#" onclick = "makeActiveLink(this)" name="nav">communities</a>
...

Answer 2

selectedLink.classList.className += "active" ; delete "+"

And for the link "Home", made a name class="active done" and in the css, add.done {background: ...(your color)} and change the class with JS in your funtion.

I hope it's clear for you.

Answer 3

element.classList.className is invalid since they are different things .

This code should do the trick:

function makeActiveLink(id) {
  //Remove 'active' from old link
  var oldLink = document.getElementByClassName("active")[0];
  oldLink.classList.remove("active");
  //Add 'active' to new link
  var selectedLink = document.getElementById(id);
  selectedLink.classList.add("active");
}

getElementByClassName() searches for elements containing a certain class and returns a collection of elements, hence the [0] at the end.

Beware this does mean you can't use the active class anywhere else on the page. If this is an issue, consider renaming it to something like active-nav .

As a side-note, consider including all your code (including html) in a snippet to make it easier to help.

Answer 4

simply:

  <div class="navbar">
    <a class="active" href="{% url 'keiji-home' %}">home</a>
    <a href="#" > communities </a>
    <a href="#">feeling lucky</a>
    <a href="{% url 'keiji-about' %}">about</a>
    <div class="navbar--right"> <a href="{% url 'register' %}">login/signup</a>
  </div>

document.querySelectorAll('div.navbar > a').forEach((lnk,_,A)=>
  {
  lnk.onclick=_=>A.forEach(a=>a.classList.toggle('active',(a===lnk)))
  })