Switching classes based on the click of a link

Question

Switching classes based on the click of a link

I have a navbar that looks like this: https://i.sstatic.net/1jcRr.png

Below is the relevant HTML code for the navbar:

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

My goal is to have a red background (class = "active") on the link (such as "home", "communities", "feeling lucky", etc.) when I am on that specific page. For example, if I'm on the "about" page, the red background should be on the about link.

As someone who is new to JavaScript, here is what I've attempted so far after researching other questions:

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

And then on the link, for instance, "communities":

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

However, my current approach is not yielding the desired result.

In addition, I would like the "active" class to be removed from the previous link. In other words, when transitioning from the "home" page to the "about" page, the class should be removed from "home" and added to "about".

Although I'm unsure if this information is relevant, I am using Django (which I'm also new to) to operate this website.

javascript html css

Answer 1

Answer №1

Here is a potential solution for what you are trying to accomplish:

function activateNavLink(element) {
    var navLinks = document.getElementsByName("nav");
    navLinks.forEach(function(link) { link.classList.remove("active"); });
    element.classList.add("active");
}

Then in your HTML:

<a href="#" onclick="activateNavLink(this)" name="nav">Home</a>
<a href="#" onclick="activateNavLink(this)" name="nav">Communities</a>
...

Answer 2

Here is a potential solution for what you are trying to accomplish:

function activateNavLink(element) {
    var navLinks = document.getElementsByName("nav");
    navLinks.forEach(function(link) { link.classList.remove("active"); });
    element.classList.add("active");
}

Then in your HTML:

<a href="#" onclick="activateNavLink(this)" name="nav">Home</a>
<a href="#" onclick="activateNavLink(this)" name="nav">Communities</a>
...

Answer 3

Answer №2

selectedLink.classList.className += "active"

; Remove the "+"

When selecting the link for "Home," assign a class name of "active done." Then, in the CSS, include .done {background: ...(your color)} and use JavaScript to update the class in your function.

I hope this explanation is helpful to you.

Answer 4

selectedLink.classList.className += "active"

; Remove the "+"

When selecting the link for "Home," assign a class name of "active done." Then, in the CSS, include .done {background: ...(your color)} and use JavaScript to update the class in your function.

I hope this explanation is helpful to you.

Answer 5

Answer №3

element.classList.className is considered incorrect because they are not the same thing.

To make it work properly, you can use the following code:

function activateLink(id) {
  //Remove 'active' from previous 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() looks for elements with a specific class and returns a collection of elements, which is why we use [0] at the end.

Just be aware that this means you should not use the class active elsewhere on the page. If this is a problem, consider renaming it to something like active-nav.

Additionally, it's recommended to include all your code (including html) in a snippet for easier troubleshooting.

Answer 6

element.classList.className is considered incorrect because they are not the same thing.

To make it work properly, you can use the following code:

function activateLink(id) {
  //Remove 'active' from previous 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() looks for elements with a specific class and returns a collection of elements, which is why we use [0] at the end.

Just be aware that this means you should not use the class active elsewhere on the page. If this is a problem, consider renaming it to something like active-nav.

Additionally, it's recommended to include all your code (including html) in a snippet for easier troubleshooting.

Answer 7

Answer №4

in a simple way:

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

Answer 8

in a simple way:

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

Switching classes based on the click of a link

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips on ensuring that a span element is positioned at the bottom of a table cell

What is the best way to adjust the font weight of a Bootstrap 4 modal header?

JavaScript: The function is encountering issues with properly formatting the numbers

Is there a way to asynchronously load multiple textures in three.js using a callback function?

The functionality of the button is currently not compatible with Internet Explorer

What is the purpose of running "npm install" if the "node_modules" directory already exists?

Incorporating JavaScript into Tailored Widgets

Is it possible for the client to prevent the blocking of the Cross-Origin Resource Sharing (CORS) error?

How to Incorporate an Error Function into XPages Partial Refresh Events (dojo.xhrPost)?

html and css code to create a linebreak ↵

The function .then is not compatible with AngularJS

How can I automatically increase a field when editing a row in JqGrid for PHP?

Is there a way to create a textbox input that provides autocomplete/autosuggest but displays only the first match directly within the textbox instead of showing a list?

Performing a callback function in node environment

Why are the links in the navgoco slide menu failing to function properly?

HTML tag naming can vary in different array types

Is it possible to vertically align variable length text within a container of fixed height?

Is there a way to transfer driver information between methods smoothly?

Attempting to divide the main page into quadrants

Changing fonts for languages that are read from right to left in WordPress