javascript - 使用 jquery 的嵌套选项卡

Question

我正在处理标签。同一页面上的多个选项卡工作正常，现在我正在尝试在选项卡内添加选项卡。嵌套子选项卡默认当前事件类不会出现我尝试在 jquery 中使用 $(this).parent() 和 $(this).closest() 但没有实现结果。这里我没有使用任何 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

你做的一切都是正确的，除了范围，你的点击事件范围应用于所有元素，你需要将范围限制在 .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>