How to add class for ACTIVE URL in sidebar?-CodePudding

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?

CodePudding user response：

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 >
<a href="https://stacksnippets.net/js">Active</a>
<a href="aaa">test3</a>
</div>