jQuery在用户单击时动态添加和删除类

Question

我遇到以下代码的问题。我有两个选项卡在我的导航Tab-1 & Tab-2，当用户点击任何选项卡，然后我想添加活动类，并在同一时间我想删除活动类从以前的活动标签。此外，当前处于活动状态的标签应该显示其内容，并且必须隐藏其余内容。这意味着当用户点击任何选项卡时，应该只显示其内容，其他内容应该隐藏。请帮助我，谢谢你。

<style> 
    .wrapper .tabs { 
     display: none; 
    } 
    .wrapper .tabs.active { 
     display: block; 
    } 
</style> 

<div class="wrapper"> 

    <!-- Navigation --> 
    <ul class="nav"> 
     <li class="active"><a href="#tab-1">Tab-1</a></li> 
     <li><a href="#tab-2">Tab-2</a></li> 
    </ul> 

    <!-- Panel-1 --> 
    <div id="tab-1" class="tabs active"> 
     <p>Tab-1 Content</p> 
    </div> 

    <!-- Panel-2 --> 
    <div id="tab-2" class="tabs"> 
     <p>Tab-2 Content</p> 
    </div> 

</div> 

<!-- Script --> 
<script> 
    $(document).ready(function() { 
     $('.nav li').click(function() { 
      $('.nav li.active').removeClass('active'); 
      $(this).addClass('active'); 
     }); 

     // To display content for active class only 
     $('.nav li').click(function() { 
      $('.wrapper .tabs.active').removeClass('active'); 
      $(this).addClass('active'); 
     }); 
    }); 
</script> 

Answer 1

可以在附连到选择器"a[href^='#tab-']"，其选择元件，其中href始于#tab-click事件使用.eq()，.index()，创建变量引用的元件，其中id开始与tab-，调用event.preventDefault()click功能内，以避免导航到文档片段，.hide()，.show()

$(document).ready(function() { 
 
    var a = $("a[href^='#tab-']"); 
 
    var tabs = $("[id^=tab]"); 
 
    a.click(function(e) { 
 
     e.preventDefault(); 
 
     tabs.hide().eq(a.index(this)).show() 
 
    }) 
 
    })

#tab-1 { 
 
    display: block; 
 
} 
 
[id^="tab"]:not(#tab-1) { 
 
    display: none; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"> 
 
</script> 
 
<div class="wrapper"> 
 
    <!-- Navigation --> 
 
    <ul class="nav"> 
 
    <li> 
 
     <a href="#tab-1">Tab-1</a> 
 
    </li> 
 
    <li> 
 
     <a href="#tab-2">Tab-2</a> 
 
    </li> 
 
    </ul> 
 
    <!-- Panel-1 --> 
 
    <div id="tab-1" class="tabs active"> 
 
    <p>Tab-1 Content</p> 
 
    </div> 
 
    <!-- Panel-2 --> 
 
    <div id="tab-2" class="tabs"> 
 
    <p>Tab-2 Content</p> 
 
    </div> 
 
</div>