使用jQuery的嵌套选项卡

Question

我正在使用标签。现在，我想在同一页上的多个标签正常运行，我正在尝试在标签内添加标签。我尝试在jquery中使用$(this).parent()和$(this).closest()但未实现结果，嵌套的Sub选项卡默认当前活动类不会出现，这里我没有使用任何ID，因为我想在同一页面上使用多个选项卡正在动态地来。任何人都可以向我指出正确的方向：嵌套选项卡默认活动选项卡，并且我在HTML中添加了当前类，但是由于每次循环，当前类都将被删除。如何仅定位当前的父标签，而不定位子嵌套标签。

获得了多个标签

function atscTabs() {
  $('.at-tabs').each(function(index, item) {
    var $mainContainer = $(this);
    var $menuContainer = $(this).find('.at-tabs-nav__item');
    var $label = $(this).find('.at-tab-__title_text');
    var $content = $(this).find('.at-tabs-content__item');

    $content.hide();
    $label.each(function(idx, ele) {
      $(this).attr('data-target', idx)
    });
    $($menuContainer[0], $label[0]).addClass('current');
    $($content[0]).show();

    $menuContainer.click(function(ele) {
      $($mainContainer).find('.current').removeClass('current');
      $(this).addClass('current');
      $(this).find('.at-tab-__title_text').addClass('current');
      $($mainContainer).find('.at-tabs-content .at-tabs-content__item').hide().eq(parseInt($(this).find('[data-target]').attr('data-target'))).show();
    });
  });
}

atscTabs();

.tab-warp {
  width: 500px;
  margin: 0 auto;
}

.at-tabs-nav__item.current {
  padding: 10px 20px;
  background-color: #3c98ff;
}

.at-tabs-nav {
  display: flex;
  padding: 28px 0px;
}

a.at-tabs-title {
  text-decoration: none;
  font-size: 18px;
  color: black;
}

.current a.at-tabs-title {
  color: #fff;
}

.at-tabs-nav__item {
  padding: 10px 20px;
  margin: 0 10px;
  background: #e1e1e1;
}

.at-tabs-content {
  font-size: 16px;
  padding: 25px;
  background: #e1e1e1;
}

hr {
  height: 5px;
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id="at-tabs-c2a3d74" class="at-tabs">
  <div class="at-tabs-nav">

    <div class="at-tabs-nav__item">
      <a class="at-tabs-title" href="#">
        <div class="at-title-text-wrapper">
          <span class="at-tab-__title_text current">Tab #1</span>
        </div>
      </a>
    </div>
    <div class="at-tabs-nav__item">
      <a class="at-tabs-title" href="#">
        <div class="at-title-text-wrapper">
          <span class="at-tab-__title_text">Tab #2</span>
        </div>
      </a>
    </div>
    <div class="at-tabs-nav__item">
      <a class="at-tabs-title" href="#">
        <div class="at-title-text-wrapper">
          <span class="at-tab-__title_text">Tab #3</span>
        </div>
      </a>
    </div>

  </div>
  <div class="at-tabs-content">
    <div class="at-tabs-content__item">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
    </div>
    <div class="at-tabs-content__item">
      ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
    </div>
    <div class="at-tabs-content__item">
      I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
    </div>
  </div>
</div>



<div id="at-tabs-c2a3d74" class="at-tabs">
  <div class="at-tabs-nav">

    <div class="at-tabs-nav__item">
      <a class="at-tabs-title" href="#">
        <div class="at-title-text-wrapper">
          <span class="at-tab-__title_text current">Tab #1</span>
        </div>
      </a>
    </div>
    <div class="at-tabs-nav__item">
      <a class="at-tabs-title" href="#">
        <div class="at-title-text-wrapper">
          <span class="at-tab-__title_text">Tab #2</span>
        </div>
      </a>
    </div>
    <div class="at-tabs-nav__item">
      <a class="at-tabs-title" href="#">
        <div class="at-title-text-wrapper">
          <span class="at-tab-__title_text">Tab #3</span>
        </div>
      </a>
    </div>

  </div>
  <div class="at-tabs-content">
    <div class="at-tabs-content__item">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
    </div>
    <div class="at-tabs-content__item">
      ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
    </div>
    <div class="at-tabs-content__item">
      I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
    </div>
  </div>
</div>

尝试制作嵌套标签

function atscTabs() {
  $('.at-tabs').each(function(index, item) {
    var $mainContainer = $(this);
    var $menuContainer = $(this).find('.at-tabs-nav__item');
    var $label = $(this).find('.at-tab-__title_text');
    var $content = $(this).find('.at-tabs-content__item');

    $content.hide();
    $label.each(function(idx, ele) {
      $(this).attr('data-target', idx)
    });
    $($menuContainer[0], $label[0]).addClass('current');
    $($content[0]).show();

    $menuContainer.click(function(ele) {
      $($mainContainer).find('.current').removeClass('current');
      $(this).addClass('current');
      $(this).find('.at-tab-__title_text').addClass('current');
      $($mainContainer).find('.at-tabs-content .at-tabs-content__item').hide().eq(parseInt($(this).find('[data-target]').attr('data-target'))).show();
    });
  });
}

atscTabs();

.tab-warp {
  width: 500px;
  margin: 0 auto;
}

.at-tabs-nav__item.current {
  padding: 10px 20px;
  background-color: #3c98ff;
}

.at-tabs-nav {
  display: flex;
  padding: 28px 0px;
}

a.at-tabs-title {
  text-decoration: none;
  font-size: 18px;
  color: black;
}

.current a.at-tabs-title {
  color: #fff;
}

.at-tabs-nav__item {
  padding: 10px 20px;
  margin: 0 10px;
  background: #e1e1e1;
}

.at-tabs-content {
  font-size: 16px;
  padding: 25px;
  background: #e1e1e1;
}

hr {
  height: 5px;
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id="at-tabs-c2a3d74" class="at-tabs">
  <div class="at-tabs-nav">

    <div class="at-tabs-nav__item">
      <a class="at-tabs-title" href="#">
        <div class="at-title-text-wrapper">
          <span class="at-tab-__title_text current">Tab #1</span>
        </div>
      </a>
    </div>
    <div class="at-tabs-nav__item">
      <a class="at-tabs-title" href="#">
        <div class="at-title-text-wrapper">
          <span class="at-tab-__title_text">Tab #2</span>
        </div>
      </a>
    </div>
    <div class="at-tabs-nav__item">
      <a class="at-tabs-title" href="#">
        <div class="at-title-text-wrapper">
          <span class="at-tab-__title_text">Tab #3</span>
        </div>
      </a>
    </div>
  </div>
  <div class="at-tabs-content">
    <div class="at-tabs-content__item">


      <div id="at-tabs-c2a3d74" class="at-tabs">
        <div class="at-tabs-nav">

          <div class="at-tabs-nav__item">
            <a class="at-tabs-title" href="#">
              <div class="at-title-text-wrapper">
                <span class="at-tab-__title_text current">Tab #1</span>
              </div>
            </a>
          </div>
          <div class="at-tabs-nav__item">
            <a class="at-tabs-title" href="#">
              <div class="at-title-text-wrapper">
                <span class="at-tab-__title_text">Tab #2</span>
              </div>
            </a>
          </div>
          <div class="at-tabs-nav__item">
            <a class="at-tabs-title" href="#">
              <div class="at-title-text-wrapper">
                <span class="at-tab-__title_text">Tab #3</span>
              </div>
            </a>
          </div>
        </div>
        <div class="at-tabs-content">
          <div class="at-tabs-content__item">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
          </div>
          <div class="at-tabs-content__item">
            ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
          </div>
          <div class="at-tabs-content__item">
            I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
          </div>
        </div>
      </div>

    </div>
    <div class="at-tabs-content__item">
      ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
    </div>
    <div class="at-tabs-content__item">
      I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
    </div>
  </div>
</div>

Answer 1

您在做一切正确的事情，除了范围，您的click event范围适用于所有元素，您需要将范围限制为.at-tabs

赞：

$(this).find('.at-tabs-nav__item').click(function(ele) {   
      $(this).closest('.at-tabs').find('.current').removeClass('current');
      $(this).addClass('current');
      $(this).find('.at-tab-__title_text').addClass('current');
      $(this).closest('.at-tabs').find('.at-tabs-content__item').hide().eq(parseInt($(this).find('[data-target]').attr('data-target'))).show();
    });
  });

完整示例：

function atscTabs() {
  $('.at-tabs').each(function(index, item) {

    var $mainContainer = $(this);
    var $menuContainer = $(this).find('.at-tabs-nav__item');
    var $label = $(this).find('.at-tab-__title_text');
    var $content = $(this).find('.at-tabs-content__item');

    $content.hide();
    $label.each(function(idx, ele) {
      $(this).attr('data-target', idx)
    });
    $($menuContainer[0], $label[0]).addClass('current');
    $($content[0]).show();

    $(this).find('.at-tabs-nav__item').click(function(ele) {
      $(this).closest('.at-tabs').find('.current').removeClass('current');
      $(this).addClass('current');
      $(this).find('.at-tab-__title_text').addClass('current');
      $(this).closest('.at-tabs').find('.at-tabs-content__item').hide().eq(parseInt($(this).find('[data-target]').attr('data-target'))).show();
    });
  });
}

atscTabs();

.tab-warp {
  width: 500px;
  margin: 0 auto;
}

.at-tabs-nav__item.current {
  padding: 10px 20px;
  background-color: #3c98ff;
}

.at-tabs-nav {
  display: flex;
  padding: 28px 0px;
}

a.at-tabs-title {
  text-decoration: none;
  font-size: 18px;
  color: black;
}

.current a.at-tabs-title {
  color: #fff;
}

.at-tabs-nav__item {
  padding: 10px 20px;
  margin: 0 10px;
  background: #e1e1e1;
}

.at-tabs-content {
  font-size: 16px;
  padding: 25px;
  background: #e1e1e1;
}

hr {
  height: 5px;
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id="at-tabs-c2a3d74" class="at-tabs">
  <div class="at-tabs-nav">

    <div class="at-tabs-nav__item">
      <a class="at-tabs-title" href="#">
        <div class="at-title-text-wrapper">
          <span class="at-tab-__title_text current">Tab #1</span>
        </div>
      </a>
    </div>
    <div class="at-tabs-nav__item">
      <a class="at-tabs-title" href="#">
        <div class="at-title-text-wrapper">
          <span class="at-tab-__title_text">Tab #2</span>
        </div>
      </a>
    </div>
    <div class="at-tabs-nav__item">
      <a class="at-tabs-title" href="#">
        <div class="at-title-text-wrapper">
          <span class="at-tab-__title_text">Tab #3</span>
        </div>
      </a>
    </div>
  </div>
  <div class="at-tabs-content">
    <div class="at-tabs-content__item">

      <div id="at-tabs-c2a3d74" class="at-tabs">
        <div class="at-tabs-nav">

          <div class="at-tabs-nav__item">
            <a class="at-tabs-title" href="#">
              <div class="at-title-text-wrapper">
                <span class="at-tab-__title_text current">Tab #1</span>
              </div>
            </a>
          </div>
          <div class="at-tabs-nav__item">
            <a class="at-tabs-title" href="#">
              <div class="at-title-text-wrapper">
                <span class="at-tab-__title_text">Tab #2</span>
              </div>
            </a>
          </div>
          <div class="at-tabs-nav__item">
            <a class="at-tabs-title" href="#">
              <div class="at-title-text-wrapper">
                <span class="at-tab-__title_text">Tab #3</span>
              </div>
            </a>
          </div>
        </div>
        <div class="at-tabs-content">
          <div class="at-tabs-content__item">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
          </div>
          <div class="at-tabs-content__item">
            ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
          </div>
          <div class="at-tabs-content__item">
            I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
          </div>
        </div>
      </div>

    </div>
    <div class="at-tabs-content__item">
      ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
    </div>
    <div class="at-tabs-content__item">
      I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
    </div>
  </div>
</div>