如何使用JS或jQuery将类应用于列表项，而不用按ID并保持活动状态？

Question

So I'm using a CMS that doesn't allow me to apply an onclick on the a tag or use an onclick. So it basically outputs in code like the following:

<ul class="ul-class" id="ul-id">
 <li class="nav-items"><a href="1">Something1</a></li>
 <li class="nav-items"><a href="2">Something2</a></li>
 <li class="nav-items"><a href="3">Something3</a></li>
 <li class="nav-items"><a href="4">Something4</a></li>
 <li class="nav-items"><a href="5">Something5</a></li>
</ul>

What I need to be able to do is apply a class showing an underline on the link that's been clicked that then leaves if another link has been clicked. Unfortunately I cannot get the class to stay present with the click.

I've tried this: JS Onclick Add Class

But the OP was using an onclick to latch onto.

What I've ended up with is this:

$(".nav-items").click(function (e) {
$(this).addClass("nav-active").siblings().removeClass("nav-active");
 });

Then for the CSS I have:

a.nav-active{
 border-bottom: 5px solid green;
 padding-bottom: 10px;
 }

The border pops up but leaves immediately. Is there something wrong with the code or do I need to put something else in to make the border permanent unless clicked elsewhere?

Answer 1

You can do something like:

Note: You have to use .nav-active instead of a.nav-active because your .nav-active is <li> and an <a>

 $(function() { $(".nav-items").click(function(e) { e.preventDefault(); /* To prevent redirect of <a> */ $(".nav-items").removeClass("nav-active"); /* Remove the class to all nav-items */ $(this).addClass("nav-active"); /* Add the class to clicked nav-items*/ }); }); 

 .nav-active { border-bottom: 5px solid green; padding-bottom: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="ul-class" id="ul-id"> <li class="nav-items"><a href="1">Something1</a></li> <li class="nav-items"><a href="2">Something2</a></li> <li class="nav-items"><a href="3">Something3</a></li> <li class="nav-items"><a href="4">Something4</a></li> <li class="nav-items"><a href="5">Something5</a></li> </ul> 

Answer 2

I had to reverse your CSS (to .nav-active a instead of a.nav-active ) and add e.preventDefault(); to the jQuery, but otherwise it seems to be working. It wouldn't hurt to remove the class first before adding it, so change

$(this).addClass("nav-active").siblings().removeClass("nav-active");

to

$(this).siblings().removeClass("nav-active");
$(this).addClass("nav-active");

Answer 3

A possible approach with plain JavaScript

var myItems = Array.from(document.querySelectorAll(".nav-items")); // make array from NodeList
myItems.forEach(navItem => navItem.addEventListener("click", event => {
    myItems.forEach(maybeSelectedBefore => maybeSelectedBefore.classList.remove("nav-active"));
    event.target.classList.toggle("nav-active", true);
});