How to change the active navbar icon on navigation with javascript
Question
I'm trying to implement a javascript code to change the highlighted item on the menu based on the url accessed, but I'm novice with javascript. After some research I ended up with the code below:
const currentLocation = location.href; const menuItem = document.querySelectorAll('a'); const menuLenght = menuItem.length for (let i = 0; i < menuLenght; i++) { if menuItem[i].href === currentLocation { menuItem[i].className = "active" } }
<div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active megamenu"> <a href="/index.php" class="dropdown-toggle">Home</a> </li> <li class="megamenu"><a href="/institution">institution</a></li> <li><a href="/contact">Contact</a></li> </li> </div>
After saving and testing it didn't give me the expected result, but I can't determine why. Could anybody tell me why this doesn't work?
3 answers
solution1
0 2021-02-08 18:29:48
you have to get the current location first,try this:
const navbar = document.getElementById('navbar');
const menuItem = document.querySelectorAll('a');
const menuLenght = menuItem.length
let current_location="/"+window.location.href.split('/')[window.location.href.split('/').length-1]
for (let i = 0; i < menuLenght; i++) {
if (menuItem[i].href === current_location) {
menuItem[i].className = "active"
}
}
solution2
0 2021-02-08 18:57:08
what you are doing wrong?, as per the code given by you,your active class should be applied to <li> not to <a> first you should select all <li> using class name
const menuItems = document.querySelectorAll('.megamenu');
this class 'megamenu' should be applied to all <li> , consider the last <li> . after that you should find out <a> from <li> which is the very first node of it, and check for the href value, if its match with current url,active class should be added to <li> not to <a>
for (let i = 0; i < menuLenght; i++) {
if menuItem[i].children[0].href === currentLocation {
menuItem[i].className = "megamenu active";
}
}
solution3
0 2021-02-09 13:55:33
There's another way:
On the a tag, you can add a onclick handler and in the function, you can add the class. When you add the onclick handler, pass the event. With this, you can add styles, classes etc.,
Also, if you want to highlight the link, add the active class to the <a> not <li>
Code:
<?DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title> How to get values from html input array using JavaScript. </title> <style>:active{ color; red: } </style> </head> <body style="text-align; center."> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li class="megamenu"> <a href="/index.php" class="dropdown-toggle active" onclick="changeColor(event)">Home</a> </li> <li class="megamenu"> <a href="/institution" onclick="changeColor(event)">institution</a> </li> <li> <a href="/contact" onclick="changeColor(event)">Contact</a> </li> </ul> </div> <script type="text/javascript"> function changeColor(e){ e.currentTarget;className = "active"; } </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.