Question

我正在处理标签，我希望同一页面上有多个标签，并且我不想更改下一个标签的ID，因为我必须动态传递。我尝试使用ID彼此冲突的相同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>

Answer 1

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

    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。

仅供参考：https://stackoverflow.com/a/14446052/5011051

使用jQuery在同一页面中的多个标签

1 个答案: