jQuery Tabbed Cont

Question

那么为什么我的.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>

                           

有关CapEx和OpEx采购的优惠，您可以选择               最适合您的付款方式。帮助您最大化现金流量               惠普的月度订阅。您甚至可以每次都更新您的技术               三年。

                                        

HP Slice

              

£799

              

特价RRP：£974

              购买HP Slice                                         

Z2 Mini

              

£735

              

特价RRP：£768

              买Z2 Mini                                         

Elite x360

              

£1399

              

特价RRP：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>

Answer 1

嗯，我无法弄清楚你的问题。这只是工作......？当我点击seond选项卡时，第二个内容可见，活动类将被设置？ 你能再一次解释一下你的问题吗？而你在谈论第二个内容。在你的例子中只有一个在场？

 $(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>