Skip to content
Advertisement

How to add class for ACTIVE URL in sidebar?

My code:

const address = location.pathname;
const links = document.querySelectorAll('.sidebarMain a');

links.forEach(function(el) {
 if(new RegExp(`^${el.getAttribute('href')}(.*)$`, 'i').test(address))
el.classList.add('active')});

But it doesn’t work, where did I go wrong?

Advertisement

Answer

The HREF of links will automatically include the current domain when accessing via javascript, so you can just directly compare to window.location.href

let links = document.querySelectorAll(".sidebarMain a");
let cur = window.location.href;

console.log(cur)

links.forEach(function(link){
 if(link.getAttribute("href") == cur){
   link.classList.add("active");
 }
});
.active{font-weight:bold;color:red;}
<div class="sidebarMain">
<a href="https://stacksnippets.net/js">Active</a>
<a href="aaa">test3</a>
</div>
User contributions licensed under: CC BY-SA
5 People found this is helpful
Advertisement