0

I'm trying to add class to 'a' tag on click on 'li' tag. It's my first time using jQuery so probably I'm missing something

$('.nav-item').click( function() {
   $(".nav-item a").removeClass("active");
   $(".nav-item a").addClass("active");
} );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="navbar-nav me-auto mb-2 mb-md-0">
    <li class="nav-item">
        <a class="nav-link" data-target="#myCarousel" data-slide-to="0" href="#">Left</a>
    </li>
    <li class="nav-item" data-target="#myCarousel" data-slide-to="1">
        <a class="nav-link active" href="#">Home</a>
    </li>
    <li class="nav-item" data-target="#myCarousel" data-slide-to="2">
        <a class="nav-link" href="#" >Right</a>
    </li>
</ul>

Improve this question
5
  • What should it do? What have you tried to resolve the problem? Commented Aug 24, 2021 at 7:47
  • @NicoHaase I believe the problem is that he removes and add the same class to all elements. so visual he see no changes. Commented Aug 24, 2021 at 7:49
  • 2
    $(".nav-item a") selects all links, so you're removing the class from all, then adding it to all. Commented Aug 24, 2021 at 7:50
  • I'm trying to Add 'active' class to clicked element and remove it from other elements Commented Aug 24, 2021 at 7:58
  • Please add all such information to your question by editing it. What makes you think that succeeding calls of $(".nav-item a") yield different elements? Commented Aug 24, 2021 at 8:08

2 Answers 2

Reset to default
4

$(".nav-item a") will select all nav-items use $(this) to get the selected item, then it will select the clicked .nav-item then you can use find() to select a child, So $(this).find("a") will select the a of the clicked .nav-item

Snippet 

$('.nav-item').click( function() {
   $(".nav-item a").removeClass("active");
   $(this).find("a").addClass("active");
} );
.nav-item a{ text-decoration:none; color:blue; }
.nav-item a.active{ color:red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
    <a class="nav-link" data-target="#myCarousel" data-slide-to="0" href="#">Left</a>
</li>
<li class="nav-item" data-target="#myCarousel" data-slide-to="1">
    <a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item" data-target="#myCarousel" data-slide-to="2">
    <a class="nav-link" href="#" >Right</a>
</li>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

You have to use $("a",this).addClass("active"); and not $(".nav-item a").addClass("active"); because right now you are setting the class active to all <a>

this refers to the element you click, and $("a",this) means that you are looking for the element a inside of the element that you clicked on.

Demo

$('.nav-item').click(function() {
  $(".nav-item a").removeClass("active");
  $("a",this).addClass("active");
});
a.active{
color:black}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="navbar-nav me-auto mb-2 mb-md-0">
  <li class="nav-item">
    <a class="nav-link" data-target="#myCarousel" data-slide-to="0" href="#">Left</a>
  </li>
  <li class="nav-item" data-target="#myCarousel" data-slide-to="1">
    <a class="nav-link active" href="#">Home</a>
  </li>
  <li class="nav-item" data-target="#myCarousel" data-slide-to="2">
    <a class="nav-link" href="#">Right</a>
  </li>

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.