使用 removeClass 从列表项单击锚点 link 中移除 class

Question

我在删除选项卡 2 列表项上的 class 单击时遇到问题。这些是带有显示内容的下划线的链接。

目前的代码相当接近，只需要一点点手就能看到我遗漏了什么。

<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

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 2

两种不同的行为...

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 3

@farinspace 我正在尝试这个。我认为该错误与窗格代码“最接近”。

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>

使用 removeClass 从列表项单击锚点 link 中移除 class

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

javascript

jquery

class

onclick