javascript - 当用户单击时，jQuery 动态添加和删除类

Question

我的以下代码有问题。我的导航中有两个选项卡 Tab-1 和 Tab-2，当用户单击任何选项卡时，我想向其添加 active 类，并在同时我想从以前的事件选项卡中删除事件类。此外，当前事件的选项卡应显示其内容并必须隐藏其余内容。这意味着当用户单击任何选项卡时，它应该只显示其内容，而其他内容应该隐藏。请帮帮我谢谢。

<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^ 的 click 事件中使用 .eq()、.index() ='#tab-']" 选择 href 以 #tab- 开头的元素，创建变量引用其中 id 的元素以 tab- 开头，在 click 函数中调用 event.preventDefault() 以防止导航到文档片段，.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>