多个嵌套标签页

时间：2019-03-22 08:46:12

标签： javascript jquery html css

我正在使用标签。现在，我想在同一页上的多个标签正常运行，我正在尝试在标签内添加标签。我没有尝试过使用嵌套的Sub选项卡，当前的活动类，我尝试在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();
    //adding data attribute 
    $label.each(function(idx, ele) {
      $(this).attr('data-target', idx)
    });
    $($menuContainer[0], $label[0]).addClass('current');
    $($content[0]).show();

    //Display current tab content
    $(this).find('.at-tabs-nav__item').click(function(ele) {
      //debugger;
      $(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:first > .at-tabs-content__item').hide();
      $(this).closest('.at-tabs').find('.at-tabs-content:first > .at-tabs-content__item').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;
}


/* Vertial tabs */

.at-tabs.at-vertical {
  display: flex;
}

.at-vertical .at-tabs-nav {
  display: flex;
  flex-direction: column;
  padding: 28px 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="tab-warp">
  <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">Sub 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">Sub 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">Sub 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 sius, 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 adnec ullamcorper mattis, pulvinar dapibus leo.
      </div>
    </div>
  </div>

单击选项卡，然后再次回到第一个选项卡，然后嵌套选项卡的当前类不显示。 current class is missing

1 个答案:

答案 0 :(得分：1)

问题在于Enter the month: March Enter the year: 2012 The 1st of March 2012 is a Thursday. 方法将在整个DOM子树中找到匹配项，因此，将其应用于顶级选项卡时，它还将与子选项卡中的项匹配。

您可以改为使用find方法来解决此问题-有时链接成孙子。这样，您可以控制要检查和修改事物的DOM树的深度。

所以改变这个：

children

收件人：

$(this).find('.at-tabs-nav__item').click(function(ele) {
  $(this).closest('.at-tabs').find('.current').removeClass('current');
  // ...


$(this).children('.at-tabs-nav').children('.at-tabs-nav__item').click(function(ele) {
  $(this).closest('.at-tabs').children('.at-tabs-nav')
                             .children('.current').removeClass('current')
                             .children('.current').removeClass('current');
  // ...

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();
    //adding data attribute 
    $label.each(function(idx, ele) {
      $(this).attr('data-target', idx)
    });
    $($menuContainer[0], $label[0]).addClass('current');
    $($content[0]).show();

    //Display current tab content
    $(this).children('.at-tabs-nav').children('.at-tabs-nav__item').click(function(ele) {
      //debugger;
      $(this).closest('.at-tabs').children('.at-tabs-nav').children('.current').removeClass('current').children('.current').removeClass('current');
      $(this).addClass('current');
      $(this).find('.at-tab-__title_text').addClass('current');
      $(this).closest('.at-tabs').find('.at-tabs-content:first > .at-tabs-content__item').hide();
      $(this).closest('.at-tabs').find('.at-tabs-content:first > .at-tabs-content__item').eq(parseInt($(this).find('[data-target]').attr('data-target'))).show();
      ele.stopPropagation();
    });
  });
}

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


/* Vertial tabs */

.at-tabs.at-vertical {
  display: flex;
}

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

相关问题
最新问题