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

如果在标签{{1}中单击{{1}，则单击active内的<a>，将<header>类放置在<a>元素中包含的任何.vc_tta-tabs-list元素上}}包含在标题链接的href中。
在此之前，它还会从所有拥有该类的标题链接中删除href类。
仅当单击的链接的active内包含字符串“ tab” 时，此方法才有效。您可以通过在第二行将href替换为'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;
}

有效菜单链接取决于所选标签

1 个答案: