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

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');
})
})

当单击.vc_tta-tabs-list中的<a>时，如果选项卡链接的href包含在标题链接的href中，则将active类放置在<header>元素中包含的任何<a>元素上
在此之前，它还将active类从所有具有它的头链接中删除。
只有当单击的链接的href中包含字符串"tab">时，它才有效。您可以通过在第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>