0

I am trying to update the active state of a navigation tab. When the tab is clicked (newActive) is suppose to gain the class .active and the previous active tab (oldActive) needs to loose it.

So far I am able to remove the active class from oldActive, I also tried aadding a class to it and worked fine, but I am not able to do any changes to newActive when I defined it as $(this) nor when I define it as event.currentTarget.

I am also not getting any errors in the console so I can't get a lead on what's going on.

JQuery code:

    $('.navigation_tabs li').click( event => {
        let oldActive = $('.navigation_tabs li.active');
        let newActive = event.currentTarget;

        oldActive.removeClass("active");

        // this line is not working nor giving any errors
        newActive.addClass("active"); 

        loadContent(data[newActive.dataset.list]);
    });

HTML nav markup:

        <div class="navigation">
        <ul class="navigation_tabs">
            <li class="active" data-list="build">Build</li>
            <li data-list="plan">Plan</li>
            <li data-list="innovate">Innovate</li>
            <li data-list="interact">Interact</li>
            <li data-list="scale">Scale</li>
            <li data-list="service">Service</li>
            <li data-list="enhance">Enhance</li>
            <li data-list="general">General</li>
        </ul>
    </div>
Nordov
  • 3
  • 2
  • *when I defined it as $(this)* - `this` is not the element clicked when using arrow functions (`=>`) and if you used `function() {` then `this == event.currentTarget` - so why try `$(this)` but not `$(event.currentTarget)`? – freedomn-m Apr 22 '21 at 04:11

2 Answers2

1

There is actually a very simple example of this. why do you choose the hard one? The use of event.currentTarget applies to ES6. Not for jquery.

$('.navigation_tabs li').click(function() {
    $(this).addClass('active').after(function() {
       $('.active').not($(this)).removeClass('active')
    });
});
.active {
   color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navigation">
  <ul class="navigation_tabs">
    <li class="active" data-list="build">Build</li>
    <li data-list="plan">Plan</li>
    <li data-list="innovate">Innovate</li>
    <li data-list="interact">Interact</li>
    <li data-list="scale">Scale</li>
    <li data-list="service">Service</li>
    <li data-list="enhance">Enhance</li>
    <li data-list="general">General</li>
  </ul>
</div>
Özgür Can Karagöz
  • 1,039
  • 1
  • 13
  • 32
  • Great! This worked. The simple answer too my problem actually was me using an arrow function, so the scope of $(this) wasn't the one I needed but I learned from your answer, thank you! – Nordov Apr 22 '21 at 04:36
0

addClass is a JQuery function, but event.currentTarget is plain javascript event, so you can try this:

$('.navigation_tabs li').click( event => {
    let oldActive = $('.navigation_tabs li.active');
    let newActive = $(event.currentTarget); // change here

    oldActive.removeClass("active");

    // this line is now working
    newActive.addClass("active");

    loadContent(data[newActive.dataset.list]);
});
Daniel Delgado
  • 4,813
  • 5
  • 40
  • 48