CODEWITHSUNDEEP
jquerytabs
Vabilux
Vabilux

Reputation: 3

Active menu link depending on selected tab

I have a tabbed content on "about us" page which looks like this:

<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>

In the header of the site i have a menu which links directly to anchors like this

<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>

I need to figure out a way how to add a "active" class to menu link once a corresponding tab is selected (aka, if user clicks on #tab-2, that link gets "active" class. If he clicks on #tab-3, that class is removed from previous link and applied to new one...

I am a jQuery newbie so i apologize if the question is stupid. Any help would be greately appreciated.

Upvotes: 0

Views: 560

Answers (1)

tao
tao

Reputation: 90277

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

Places active class on any <a> element contained in <header> element, when an <a> inside .vc_tta-tabs-list is clicked, if the tab link's href is contained in the header link's href.
Prior to this, it also removes active class from all header links that have it.
It only works if the clicked link contains the string "tab" inside its href. You can remove this limitation by replacing 'a[href*="tab"]' with 'a', on 2nd line. 

$(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>

Upvotes: 1

Related Questions