Remove class from list-item on-click anchor link with removeClass

Question

I'm having trouble with removing a class on-click on the Tab 2 list-item. These are links with underlines that show content.

The code so far fairly close, just need a little hand on seeing what I've missed.

<script type='text/javascript' src='/js/jquery/jquery.js?ver=1.12.4'></script>

HTML

<div class="mk-tabs">
    <ul>
        <li class="mk-tabs-tab"><a href="#">Tab 1</a></li>  
        <li class="mk-tabs-tab is-active"><a href="#">Tab 2</a></li>
    </ul>
    <div class="mk-tabs-panes">
        <div class="mk-tabs-pane">Tab Content 1</div>
        <div class="mk-tabs-pane is-active">Tab Content 2</div>
    </div>
</div>

jQuery

<script type="text/javascript">
    jQuery(document).ready(function($){
        $('.mk-tabs ul li a').click( function(){
            if ( $('.mk-tabs ul li').hasClass('is-active') ) {
                $('.mk-tabs ul li').removeClass('is-active');
            } 
            else {
                $('.mk-tabs ul li').removeClass('is-active'); 
            }
        });       
    });
</script>

Answer 1

Two varying behaviors ...

 jQuery(function($){ $('.mk-tabs').on('click', 'a', function(e){ e.preventDefault(); var container = $(this).closest('.mk-tabs'); var currentTab = $(this).closest('.mk-tabs-tab'); var currentIndex = currentTab.index(); $(".mk-tabs-tab", container).not(currentTab).removeClass('is-active'); currentTab.toggleClass('is-active'); var panes = $('.mk-tabs-pane', container); panes.hide(); if (currentTab.hasClass('is-active')) { panes.eq(currentIndex).show(); } }); }); jQuery(function($){ $('.mk-tabs2').on('click', 'a', function(e){ e.preventDefault(); var container = $(this).closest('.mk-tabs2'); var currentTab = $(this).closest('.mk-tabs-tab'); var currentIndex = currentTab.index(); currentTab.toggleClass('is-active'); $('.mk-tabs-pane', container).eq(currentIndex).show(); var panes = $('.mk-tabs-pane', container); if (currentTab.hasClass('is-active')) { panes.eq(currentIndex).show(); } else { panes.eq(currentIndex).hide(); } }); });

 ul { display: flex; list-style: none; } .mk-tabs-tab { padding: 5px 10px; } .mk-tabs-tab.is-active{ background-color: red } .mk-tabs-pane { display: none; } .mk-tabs-pane.is-active { display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="mk-tabs"> <ul> <li class="mk-tabs-tab"><a href="#">Tab 1</a></li> <li class="mk-tabs-tab is-active"><a href="#">Tab 2</a></li> <li class="mk-tabs-tab"><a href="#">Tab 3</a></li> <li class="mk-tabs-tab"><a href="#">Tab 4</a></li> </ul> <div class="mk-tabs-panes"> <div class="mk-tabs-pane">Tab Content 1</div> <div class="mk-tabs-pane is-active">Tab Content 2</div> <div class="mk-tabs-pane">Tab Content 3</div> <div class="mk-tabs-pane">Tab Content 4</div> </div> </div> <div class="mk-tabs2"> <ul> <li class="mk-tabs-tab"><a href="#">Tab 1</a></li> <li class="mk-tabs-tab is-active"><a href="#">Tab 2</a></li> <li class="mk-tabs-tab"><a href="#">Tab 3</a></li> <li class="mk-tabs-tab"><a href="#">Tab 4</a></li> </ul> <div class="mk-tabs-panes"> <div class="mk-tabs-pane">Tab Content 1</div> <div class="mk-tabs-pane is-active">Tab Content 2</div> <div class="mk-tabs-pane">Tab Content 3</div> <div class="mk-tabs-pane">Tab Content 4</div> </div> </div>

Answer 2

 jQuery(document).ready(function($){ $('.mk-tabs ul li a').click( function(){ if($($(this).parent()).hasClass("is-active")){ $($(this).parent()).removeClass("is-active") } else { $(".mk-tabs-tab").each(function(){ $(this).removeClass("is-active") }) if(!$($(this).parent()).hasClass("is-active")) $($(this).parent()).addClass("is-active") } }); });

 .mk-tabs{ display:flex } .is-active{ background-color:red }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="mk-tabs"> <ul> <li class="mk-tabs-tab"><a href="#">Tab 1</a></li> <li class="mk-tabs-tab is-active"><a href="#">Tab 2</a></li> <li class="mk-tabs-tab"><a href="#">Tab 3</a></li> <li class="mk-tabs-tab"><a href="#">Tab 4</a></li> </ul> </div>

Answer 3

@farinspace I'm trying this. I think the bug is "closest" on the pane code.

HTML

<div class="mk-tabs">
    <ul>
        <li class="mk-tabs-tab"><a href="#">Tab 1</a></li>  
        <li class="mk-tabs-tab is-active"><a href="#">Tab 2</a></li>
    </ul>
    <div class="mk-tabs-panes">
        <div class="mk-tabs-pane">Tab Content 1</div>
        <div class="mk-tabs-pane is-active">Tab Content 2</div>
    </div>
</div>

jQuery

jQuery(function($){
  $('.mk-tabs').on('click', 'a', function(e){
    e.preventDefault();
    
    var currentTab = $(this).closest('.mk-tabs-tab');
    currentTab.toggleClass('is-active');
    
    //if (currentTab.hasClass('is-active')) console.log('on');
    //else console.log('off');
 
    if ( currentTab.hasClass('is-active') ) {
        $('.mk-tabs .mk-tabs-panes .mk-tabs-pane').toggleClass('is-active');
    }

  });
});
</script>