活动菜单链接取决于所选选项卡

Question

我在“关于我们”的页面上有一个选项卡内容，如下所示：

<div class="container">
    <ul class="vc_tta-tabs-list">
        <li class="vc_tta-tab" data-vc-tab="">
            <a href="#tab-1" data-vc-tabs="" data-vc-container=".vc_tta">Tab 1</a>
        </li>
        <li class="vc_tta-tab" data-vc-tab="">
            <a href="#tab-2" data-vc-tabs="" data-vc-container=".vc_tta">Tab 2</a>
        </li>
        <li class="vc_tta-tab" data-vc-tab="">
            <a href="#tab-3" data-vc-tabs="" data-vc-container=".vc_tta">Tab 3</a>
        </li>
    </ul>


    <div class="vc_tta-panels">
        <div class="vc_tta-panel" id="tab-1" data-vc-content=".vc_tta-panel-body">
            <h1>Tab 1 Content</h1>
        </div>
        <div class="vc_tta-panel" id="tab-2" data-vc-content=".vc_tta-panel-body">
            <h1>Tab 2 Content</h1>
        </div>  
        <div class="vc_tta-panel" id="tab-3" data-vc-content=".vc_tta-panel-body">
            <h1>Tab 3 Content</h1>
        </div>
    </div>  
</div>

在站点的标题中，我有一个菜单，它直接链接到像下面这样的锚

<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html#tab-1">Tab 1</a></li>
    <li><a href="about-html#tab-2">Tab 2</a></li>
    <li><a href="about.html#tab-3">Tab 3</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>

我需要找到一种方法，在选择相应的选项卡后，如何将“活动”类添加到菜单链接(也就是，如果用户单击# tab -2，该链接将得到“活动”类。如果他单击#tab-3，该类将从以前的链接中删除并应用到新的链接中.

我是jQuery新手，所以如果这个问题很愚蠢，我很抱歉。任何帮助都将不胜感激。

Answer 1

$(window).on('load', () => {
  $('.vc_tta-tabs-list').on('click tap', 'a[href*="tab"]', e => {
    $('header a').removeClass('active');
    let href = $(e.target).closest('a').attr('href');
    $("header a[href*='"+href+"']").addClass('active');
  })
})

当单击active元素中的<a>时，如果选项卡链接的href包含在标题链接的href中，则将.vc_tta-tabs-list类放置在<header>元素中包含的任何<a>元素上。

在此之前，它还会从所有具有active类的头链接中删除它。

只有当单击的链接在其href中包含字符串“选项卡”时，它才能工作。您可以通过在第2行将'a[href*="tab"]'替换为'a'来消除此限制。

$(window).on('load', () => {
  $('.vc_tta-tabs-list').on('click tap', 'a[href*="tab"]', e => {
    $('header a').removeClass('active');
    let href = $(e.target).closest('a').attr('href');
    $("header a[href*='"+href+"']").addClass('active');
  })
})

header ul {
  display: flex;
}
header li {
  display: block;
  padding-right: 1rem
}
header li .active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<header>
  <ul>
    <li><a href="index.html" class="active">Home</a></li>
    <li><a href="about.html#tab-1">Tab 1</a></li>
    <li><a href="about.html#tab-2">Tab 2</a></li>
    <li><a href="about.html#tab-3">Tab 3</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</header>
<div class="container">
  <ul class="vc_tta-tabs-list">
    <li class="vc_tta-tab" data-vc-tab="">
      <a href="#tab-1" data-vc-tabs="" data-vc-container=".vc_tta">Tab 1</a>
    </li>
    <li class="vc_tta-tab" data-vc-tab="">
      <a href="#tab-2" data-vc-tabs="" data-vc-container=".vc_tta">Tab 2</a>
    </li>
    <li class="vc_tta-tab" data-vc-tab="">
      <a href="#tab-3" data-vc-tabs="" data-vc-container=".vc_tta">Tab 3</a>
    </li>
  </ul>


  <div class="vc_tta-panels">
    <div class="vc_tta-panel" id="tab-1" data-vc-content=".vc_tta-panel-body">
      <h1>Tab 1 Content</h1>
    </div>
    <div class="vc_tta-panel" id="tab-2" data-vc-content=".vc_tta-panel-body">
      <h1>Tab 2 Content</h1>
    </div>
    <div class="vc_tta-panel" id="tab-3" data-vc-content=".vc_tta-panel-body">
      <h1>Tab 3 Content</h1>
    </div>
  </div>
</div>

​