javascript - jQuery选项卡式续

那么，为什么不将我的.active类放置在第二个.purchase-content类中呢？ .purchase__tabs元素可以正常工作，只是我遇到问题的JS的第n个子元素。

JS

  $(document).ready(function(){
      $(".purchase-tab").click(function(e){
          if (!$(this).hasClass("active")) {
              var tabNum = $(this).index();
              var nthChild = tabNum+1;
              $(".purchase-tab.active").removeClass("active");
              $(this).addClass("active");
              $(".purchase-content.active").removeClass("active");
              $(".purchase-content:nth-child("+nthChild+")").addClass("active");
          }
      });
  });

的CSS

.purchase-content {
  display: none;
}

.purchase-content.active  {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

的HTML

    <div class="purchase__tabs">
      <div class="col-50 purchase-tab active">
        <h2>Upfront Payment</h2>
      </div>
      <div class="col-50 purchase-tab">
        <h2>Pay Monthly</h2>
      </div>
    </div>

            
              通过购买机器人资本支出和运营支出的优惠，您可以选择
              最适合您的付款方式。帮助您最大化现金流量
              HP的每月订阅。您甚至可以每次更新技术
              三年
            
            
              惠普切片
              £799
              特殊的零售价：£974
              购买惠普切片
            
            
              Z2迷你
              £735
              特殊的建议零售价：768英镑
              购买Z2 Mini
            
            
              精英x360
              £1399
              特殊的零售价：£1636
              购买Elite x360
            
          

    <div class="purchase-content">
      <p>With great offers on both CapEx and OpEx purchasing you can choose a
      payment option that works best for you. Help maximise your cash flow
      with HPs monthly subscription, you even get to renew your technology
      every three years</p>
      <div class="col-third">
        <h2>HP Slice</h2>
        <h1>£23</h1>
        <h3>per month over 18 months</h3>
        <a href="#" class="btn btn--yellow">Buy HP Slice</a>
      </div>
      <div class="col-third">
        <h2>Z2 Mini</h2>
        <h1>£42</h1>
        <h3>per month over 18 months</h3>
        <a href="#" class="btn btn--yellow">Buy Z2 Mini</a>
      </div>
      <div class="col-third">
        <h2>Elite x360</h2>
        <h1>£89</h1>
        <h3>per month over 18 months</h3>
        <a href="#" class="btn btn--yellow">Buy HP Slice</a>
      </div>
    </div>

最佳答案

嗯，我不明白你的问题。这只是工作...？当我单击第二个选项卡时，第二个内容变为可见，并且将设置活动类？
您能再解释一下您的问题吗？您正在谈论第二个内容。在您的示例中，只有一个？

 $(document).ready(function(){
      $(".purchase-tab").click(function(e){
          if (!$(this).hasClass("active")) {
              var tabNum = $(this).index();
              var nthChild = tabNum+1;
              $(".purchase-tab.active").removeClass("active");
              $(this).addClass("active");
              $(".purchase-content.active").removeClass("active");
              $(".purchase-content:nth-child("+nthChild+")").addClass("active");
          }
      });
  });

.purchase-content {
  display: none;
}

.purchase-content.active  {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background: red;
}

.purchase-tab.active {
  color: #666;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="purchase__tabs">
  <div class="col-50 purchase-tab active">
    <h2>Upfront Payment</h2>
  </div>
  <div class="col-50 purchase-tab">
    <h2>Pay Monthly</h2>
  </div>
</div>

<div class="wrapper">
  <div class="purchase-content active">
    test
  </div>

  <div class="purchase-content">
    Content 2
  </div>
</div>