时间戳

首页 > 解决方案 > 同一页面上的多个 jQuery 选项卡

javascript - 同一页面上的多个 jQuery 选项卡

问题描述

我试图让同一页面上的多个选项卡工作，而无需更改我的标记或样式。

问题是单击一个部分中的选项卡链接会从其他部分中删除内容

我看到其他具有相同问题的问题，但我无法修改我的 HTML 或 CSS

// Change tab class and display content
$('.tabs-nav a').on('click', function (event) {
    event.preventDefault();

    $('.tab-active').removeClass('tab-active');
    $(this).parent().addClass('tab-active');
    $('.tabs-stage .tab-content').hide();
    $($(this).attr('href')).show();
});

$('.tabs-nav a:first').trigger('click'); // Default

JS小提琴

标签： javascriptjquery

解决方案

逻辑有几个问题。

  • 您需要将.current类添加到目标选项卡，而不是手动调用show()它，因为后者将应用内联样式，该样式不会被删除.current类覆盖。
  • 使用li:nth-child(1) a而不是a:first获取a每个容器中的第一个元素，而不是整个页面中的第一个元素。
  • 您需要从 中删除.tab-active类li，而不是a.
  • 您的 CSS 需要包含在 和 中隐藏/显示选项卡内容的.tab-content规则.tab-content.current。

解决了这些问题后，代码可以工作：

$('.tabs-nav a').on('click', e => {
  e.preventDefault();

  let $tabLink = $(e.target);
  let $div_container = $tabLink.closest('.wrap');
  $div_container.find('li').removeClass('tab-active');
  $div_container.find('.tab-content').removeClass('current');

  let targetSelector = $tabLink.attr('href');
  $tabLink.parent().addClass('tab-active');
  $(targetSelector).addClass('current');
});

$('.tabs-nav li:nth-child(1) a').trigger('click');
.tabs-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tabs-nav a {
  border-bottom: 5px #a6a6a6 solid;
  color: #a6a6a6;
  display: block;
  font-size: 18px;
  font-weight: 600;
  padding: 10px 40px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
}

.tabs-nav .tab-active a {
  border-bottom-color: #000;
  color: var(--body-color);
  cursor: default;
  z-index: 1;
}

.tabs-nav li {
  float: left;
}

.tabs-stage {
  background-color: #fff;
  border-radius: 0 0 6px 6px;
  border-top: 5px #a6a6a6 solid;
  clear: both;
  /* margin-bottom: 20px; */ /* removed for this demo to save space */
  padding: 10px 20px 20px;
  position: relative;
  top: -5px;
  width: 100%;
}

.tab-content {
  display: none;
}

.tab-content.current {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<section class="wrap">
  <ul class="tabs-nav">
    <li><a href="#tab11" rel="nofollow">Tab 1</a></li>
    <li><a href="#tab12" rel="nofollow">Tab 2</a></li>
  </ul>
  <div class="tabs-stage">
    <div id="tab11" class="tab-content">
      <h3>Tab 1 Content</h3>
    </div>
    <div id="tab12" class="tab-content">
      <h3>Tab 2 Content</h3>
    </div>
  </div>
</section>

<section class="wrap">
  <ul class="tabs-nav">
    <li><a href="#tab21" rel="nofollow">Tab 1</a></li>
    <li><a href="#tab22" rel="nofollow">Tab 2</a></li>
  </ul>
  <div class="tabs-stage">
    <div id="tab21" class="tab-content">
      <h3>Tab 1 Content</h3>
    </div>
    <div id="tab22" class="tab-content">
      <h3>Tab 2 Content</h3>
    </div>
  </div>
</section>

推荐阅读