代码之家 › 专栏 › 技术社区 › Husna

使用jquery的嵌套选项卡

jquery javascript

Husna · 技术社区 · 6 年前

我在做标签。同一页上的多个选项卡工作正常,现在我正在尝试将选项卡添加到选项卡中。嵌套子选项卡默认当前活动类不存在我已尝试使用 $(this).parent() 和 $(this).closest()

实现了多个标签

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>

函数atscTabs(){
$('.at tabs')。每个(函数(索引,项){
var$mainContainer=$(这个);
var$menuContainer=$(this).find('.at-tabs-nav__项');
var$content=$(this).find('.at-tabs-content__项');

$label.每个(函数(idx、ele){
$(this.attr('data-target',idx)
});
$($content[0]).show();

$menuContainer.单击(函数(ele){
$(this.addClass('current');
$(this).find('.at tab-_title_text').addClass('current');
$($mainContainer).find('.at-tabs-content.at-tabs-content\uu item').hide().eq(parseInt($(this).find('[data-target]')).attr('data-target')).show();
});
});
}

atscTabs();

宽度:500px;
保证金:0自动;
}

填充:10px 20px;
背景色:#3c98ff;
}

.在制表位导航{
显示器:flex;
}

文字装饰:无;
字号:18px;
}

}

.at-tabs-nav___项目{
填充:10px 20px;
背景:#e1e1;
}

.在选项卡内容{
字体大小:16px;
填充:25px;
背景:#e1e1;
}

高度:5px;
}

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

1 回复 | 直到 6 年前

Just code 6 年前

您做的一切都是正确的,除了作用域之外,您的单击事件作用域应用于所有元素,您需要将作用域限制为 .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>