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

使用jquery在同一页中有多个选项卡

jquery javascript

-1

Husna · 技术社区 · 7 年前

我正在处理标签,我希望在同一页上有多个标签,我不想更改下一个标签的ID,因为我必须动态传递。我试着用相同的身份证,这是相互冲突的。有人能推荐我吗?到目前为止,我试过了。

function atscTabs() {
  $('.at-tabs-nav__item').click(function() {
    var tab = $(this).data('tab');

    $('.at-tab-__title_text').removeClass('current');
    $('.at-tabs-nav__item').removeClass('current');

    $(this).addClass('current');
    $("#" + tab).addClass('current');
  })
}

atscTabs();

.current {
  color: white;
  padding: 5px;
  background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="at-tabs-c2a3d74" class="at-tabs">
  <div class="at-tabs-nav">
    <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 current" data-tab="tab-1">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" data-tab="tab-2">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" data-tab="tab-3">Tab #3</span>
          </div>
        </a>
      </div>
    </div>
  </div>
  <div class="at-tabs-content">
    <div class="at-tabs-content__item" id="tab-1">
      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" id="tab-2">
      ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.					
    </div>
    <div class="at-tabs-content__item" id="tab-3">
      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 回复 | 直到 7 年前

Kesavan R 7 年前

嗨,我创建了一个小脚本来解决您的问题。我希望这会有所帮助。

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

如果仍然需要帮助,请通知我。避免在多个地方使用一个ID。

FY: https://stackoverflow.com/a/14446052/5011051