Question

我尝试使用jQuery实现标签。使当前选项卡类处于活动状态是有效的，但是为了使其兄弟的类无法工作。

＆＃13;

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();
  });
});

＆＃13;

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

＆＃13;

Answer 1

问题中的<a>元素没有兄弟姐妹。包含<li>个元素。

定位那些 - 及其后代<a>标签 - 而不是：

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');

Answer 2

您正在选择<a>代码，然后调用jQuery(this).siblings()。但是<a>标签没有任何兄弟姐妹;这是他们的父母（<li>标签）有兄弟姐妹。你应该打电话给jQuery(this).parent().siblings()。

jQuery中的siblings（）无效

2 个答案: