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

1 回答

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

  如果 Headers 链接的 href 包含在 Headers 链接的 href 中，则单击 <a> 内的 .vc_tta-tabs-list 时， active 元素中包含 active 元素的地方 active .
  在此之前，它还会从拥有它的所有 Headers 链接中删除 active 类 .
  仅当单击的链接在其 href 中包含字符串"tab"时，它才有效 . 您可以通过在第二行上将 '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>
  

  回复于 2024-05-06T02:19:10+08:00