javascript - jQuery 中的 siblings() 不起作用

Question

我尝试使用 jQuery 实现制表符。使当前选项卡类处于事件状态是可行的，但要使其同级的类为 null 则行不通。

jQuery(document).ready(function() {
  jQuery('.container .tab-links a').on('click', function(e) {

    var currentAttrValue = jQuery(this).attr('href');
    console.log(currentAttrValue);
    // jQuery(this).addClass('active').siblings.removeClass('active');
    // Show/Hide Tabs
    //jQuery(currentAttrValue).show().siblings().hide();

    // Change/remove current tab to active
    jQuery(this).addClass('active');
    jQuery(this).siblings().find('a').removeClass('active');
    jQuery('each_tab').not(currentAttrValue).css("display", "none");
    jQuery(currentAttrValue).css("display", "block");

    e.preventDefault();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section id="features">
  <header>
    <div class="features-switcher">
      <div class="container">
        <ul class="tab-links">
          <li>
            <a class="active" href="#tab1">
              <span>tab one</span>
            </a>
          </li>
          <li>
            <a class="" href="#tab2">
              <span>tab two</span>
            </a>
          </li>
          <li>
            <a class="" href="#tab3">
              <span>tab three</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <hr>
  </header>
  <div class="tab-content">
    <div id="tab1" class="tab--active">
      <section class="container">
        <h2> content of tab 1</h2>
        <hr>
      </section>
    </div>
    <div id="tab2" class="tab--inactive">
      <section class="container">
        <h2> content of tab 2</h2>
      </section>
    </div>
    <div id="tab3" class="tab--inactive">
      <section class="container">
        <h2> content of tab 3</h2>
      </section>
    </div>
  </div>
</section>

Answer 1

<a>问题中的元素没有没有 sibling 。含 <li>元素做。

针对那些⟩——⟩和他们的后代<a> tags⟩—⟩相反，带有:

jQuery(this).parent().siblings('li').find('a').removeClass('active');

你的 each_tab查询可以替换为:

jQuery('.tab-content > div').not(currentAttrValue).
   hide().  
   addClass('tab--inactive').
   removeClass('tab--active');
jQuery(currentAttrValue).
   show().
   addClass('tab--active').
   removeClass('tab--inactive');