What is the best way to implement the Active list element feature in my menu bar?

The current list element is :

<li class="nav__item"><a class="nav__link nav__link--active " href="#"...

The standard list element is:

<li class="nav__item"><a class="nav__link " href="#"...

I want the element to be active when selected and normal when not selected.

Here is the provided code snippet:

<div class="nav-section">
  <div class="nav-section__header">
    <h2 class="nav-section__title"> Heading </h2>
  </div>

  <ul class="nav">

    <li class="nav__item ">
      <a class="nav__link nav__link--active" href="../home/main1.php">
        <span class="channel-link__icon">
<span class="channel-link__element">Title1</span>
      </a>
    </li>

    <li class="nav__item ">
      <a class="nav__link nav__link--active" href="../home/main2.php">
        <span class="channel-link__icon"></span>
        <span class="channel-link__element">Title2</span>
      </a>
    </li>
  </ul>
javascripthtmljquerycss

Answer №1

If you are using plain JavaScript, you can store the nav__link elements in an array and then update the active state by removing the active class from all elements and adding it to the clicked one.

Here is an example:

Sample HTML

<a class="nav__link nav__link--active" onclick="toggle(this)" href="../home/main2.php">
    <span class="channel-link__icon"></span>
    <span class="channel-link__element">Title2</span>
</a>

JavaScript Function

function toggle(element) {
    var links = document.getElementsByClassName("nav__link");
    for(var i = 0; i < links.length; i++) {
        links[i].classList.remove("nav__link--active");
    }
    element.classList.add("nav__link--active");
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create a cylindrical HTML5 canvas and place a camera view inside the cylinder

I have a unique project in mind that involves creating an HTML5 canvas cylinder with the camera view at its center. The walls of the cylinder will display images, and the entire structure should be able to rotate and zoom. If anyone has any advice on how ...

javascriptjqueryhtmlcanvas

Dynamic resizing in NextJs does not trigger a re-render

My goal is to dynamically pass the width value to a component's styles. Everything works fine on initial load, but when I resize the window, the component fails to re-render even though the hook is functioning as intended. I came across some informat ...

javascriptcssreactjsreact-hooksnext.js

implement some level of control within the ngFor directive in Angular

For instance, let's say I have an ngfor loop: <ng-container *ngFor="let setting of settings | trackBy: trackById"> <button mat-button [matMenuTriggerFor]="menu">Menu</button> <mat-me ...

htmlangulartypescriptangular-material

What are the best ways to ensure a website is responsive in a vertical

When designing a responsive webpage, I encountered an issue with the body element not properly expanding the content vertically. Despite enlarging the web content horizontally, the body failed to adjust its height accordingly, resulting in unwanted black a ...

htmlcss

Determine if an element from the first array is present in the second array

I've encountered a challenge while building a simple react app and I could use some help. The Problem at Hand :- My goal is to compare items in firstArray (which contains separate dictionaries) with those in secondArray. While the loop for checking ...

javascriptreactjsarraysdictionary

Dealing with intricate query parameters in Express.Js

Currently, I am working on developing REST APIs using Express.js. One particular express route that I have set up is as follows: /api/customer I have incorporated multiple query parameters into this route, such as: /api/customer?name=jake /api/customer?c ...

javascriptexpressroutes

Is it possible to enter NaN in Vue3?

Is there a way to handle NaN values and keep a field blank instead when calculating margins with a formula? https://i.stack.imgur.com/JvIRQ.png Template <form> <div class="row"> <div class="mb-3 col-sm ...

javascripttypescriptvue.jsvuejs3

Is there a simpler method to enable built-in CSS-Sass in Next.js without the need for excessive configuration?

Is there a way to maintain the built-in CSS/SASS feature in Next.js without extensive configuration? Utilizing the built-in CSS/SASS is convenient, but introducing less to next.config.js triggers the disabling of this feature, requiring manual configurati ...

csswebpacksasslessnext.js

The user interface does not get refreshed right away; it only shows the changes after the

Here is an example of HTML: <div ng-repeat="user in controller.users"> <p>{{user.name}}</p> <button ng-click="controller.deleteUser(user)" value="delete"></button> </div> Next, we have the controller code: vm ...

javascriptangularjsangular-promise

The CSS styles are not immediately applied when the window is resized; they are only applied when scrolling

When utilizing the Angular approach to apply CSS, I noticed that changes are not applied when resizing the window. The canvas height adjusts correctly upon resize, but the table height only updates when we scroll the window. Is there a way to set the canva ...

cssangularjs

Retrieve external/parent page

This might be a little confusing, but here's what I've been working on. On my website, I have a main page that uses JQuery.load() to load a secondary php page. The main page's URL is: localhost/piproject/roster.php?id=2 However, when I try ...

phpjquery

In Visual Studio, make sure to include a reference to AngularJS.min.js within another JavaScript file

In my AngularJS app, I am utilizing Visual Studio with separate folders. The AngularJS-min.js file is located in a different folder. My query is how can I correctly reference the AngularJS-min.js file in my app's JavaScript file to enable auto-suggest ...

javascriptangularjsvisual-studio-2015

The mysterious case of the missing CSS file in Node.js

I recently set up a new Node.js Express Project. However, I am facing an issue with the index.ejs file showing the error: Undefined CSS file ('/stylesheets/style.css'). Here is the content of the index.ejs file: <!DOCTYPE html> <html& ...

javascripthtmlcssnode.jseclipse

Allow AngularJS to make HTTP POST requests with CORS enabled

I am looking to submit a form to send an HTTP POST request to a server located on a different domain, with CORS enabled in the server script using Node.js. Below is the Angular configuration script: var myApp = angular.module('myApp', ['ng ...

javascriptangularjshttp-postcorshttprequest

Employing live labels on a Morris Bar Chart

I'm using the Morris Bar Chart to showcase the sales of different products. To enhance user experience, I want to display dynamic labels when hovering over the bars. The data is being fetched through PHP. array('product' => $row['pr ...

javascriptphpjquerymorris.js

There are no specified operations outlined in the Node.js Express documentation

swagger ui https://i.stack.imgur.com/UIavC.png I've been struggling to resolve this issue where the /swagger endpoint seems to only partially read the swagger.json file. Despite configuring everything correctly, no errors are appearing. It simply dis ...

javascriptnode.jsexpressswaggerdocumentation

Guidelines on executing a function after page load in meteor

Currently, I am using cursor.observeChanges to monitor new records inserted in MongoDB and trigger a notification when that happens. The issue I am facing is that these notifications are popping up when my app is loaded for the first time or when I navigat ...

javascriptjqueryangularjsmeteorangular-meteor

Set border-image to have rounded corners

I am attempting to create a circular button with a unique border effect. Here is the code I have implemented so far: body { display: flex; height: 100vh; overflow: hidden; justify-content: center; align-items: center; } button { height: 80px ...

htmlcsssvg

The issue with loading scripts in a ReactJS NextJS app is related to the inline condition not working

I'm having trouble with an inline condition for loading scripts. The condition seems to be working because the tag is displaying text, but when it comes to scripts, it doesn't work. How can I resolve this issue? const cookie = new Cookies().get ...

javascripthtmlreactjstypescriptnext.js

The appropriate method for transferring a prototype to an object

From my perspective, prototypes work like this: let Animal = function() { this.bark = "woof"; } Animal.prototype.barkLoud = function() { return this.bark.toUpperCase(); } let x = new Animal(); x.barkLoud() = "WOOF"; I f ...

javascript