Link dropdown menu with tabs in bootstrap

Question

i'm having a problem linking my dropdown menu with tabs. What i'd like is for the relevant tab to toggle to be "active" in addition to the content (the class is called "active") when using tabs and getting the content select by either the dropdown or the tab navigation in Bootstrap 3.

This is the boostrap.js that controls the tabs.

  Tab.prototype.show = function () {
    var $this    = this.element
    var $ul      = $this.closest('ul:not(.dropdown-menu)')
    var selector = $this.attr('data-target')

    if (!selector) {
      selector = $this.attr('href')
      selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
    }

    if ($this.parent('li').hasClass('active')) return

    var previous = $ul.find('.active:last a')[0]
    var e        = $.Event('show.bs.tab', {
      relatedTarget: previous
    })

    $this.trigger(e)

    if (e.isDefaultPrevented()) return

    var $target = $(selector)

    this.activate($this.parent('li'), $ul)
    this.activate($target, $target.parent(), function () {
      $this.trigger({
        type: 'shown.bs.tab'
      , relatedTarget: previous
      })
    })
  }

  Tab.prototype.activate = function (element, container, callback) {
    var $active    = container.find('> .active')
    var transition = callback
      && $.support.transition
      && $active.hasClass('fade')

    function next() {
      $active
        .removeClass('active')
        .find('> .dropdown-menu > .active')
        .removeClass('active')

      element.addClass('active')

      if (transition) {
        element[0].offsetWidth // reflow for transition
        element.addClass('in')
      } else {
        element.removeClass('fade')
      }

      if (element.parent('.dropdown-menu')) {
        element.closest('li.dropdown').addClass('active')
      }

      callback && callback()
    }

    transition ?
      $active
        .one($.support.transition.end, next)
        .emulateTransitionEnd(150) :
      next()

    $active.removeClass('in')
  }

Here's my code (it works fine to display the relevant content in the tab, but the tab navigation doesn't get the "active" class toggled:

<div class="navbar navbar-fixed-top">
  <div class="container">
    <div class="row">
      <a class="navbar-brand" href="#"><img class="img-responsive" src="img/logo.jpg"></a>        
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <div class="nav-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Skin Therapies <b class="caret"></b></a>
            <ul class="dropdown-menu" id="treatment_dropdown">
              <li><a href="#acne_and_skin_health" id="acne_and_skin_health_li">Skin Health</a></li>
              <li><a href="#pigmentation_and_brightening" id="pigmentation_and_brightening_li">Pigmentation &amp; Brightening</a></li>
              <li><a href="#anti_aging" id="anti_aging_li">Anti-Aging</a></li>
              <li><a href="#pregnancy" id="pregnancy_li">Pregnancy Stretchmarks &amp; Melasma</a></li>
              <li><a href="#scars" id="scars_li">Scars</a></li>
              <li><a href="#immune_compromised_skin" id="immune_compromised_skin_li">Post Chemo &amp; Radiation Therapy</a></li>
              <li><a href="#fat_and_cellulite" id="fat_and_cellulite_li">Fat &amp; Cellulite Reduction</a></li>
              <li><a href="#vascular" id="vascular_li">Rosacea, Angiomas &amp; Spider Veins</a></li>
              <li><a href="#laser_hair_removal" id="laser_hair_removal_li">Laser Hair Removal</a></li>
              <li><a href="#">Special Events</a></li>
              <li><a href="#">For our Male Clients</a></li>                
            </ul>
          </li>
        </ul>
      </div>

I then have my tabs....

      <!-- Treatment Menu -->
  <div class="row">
    <ul class="nav nav-tabs" id="treatment_tabs">
      <li><a href="#acne_and_skin_health" id="acne_and_skin_health_tt">Skin Health</a></li>
      <li><a href="#pigmentation_and_brightening" id="pigmentation_and_brightening_tt">Pigmentation &amp; Brightening</a></li>
      <li><a href="#anti_aging" id="anti_aging_tt">Anti-Aging</a></li>
      <li><a href="#pregnancy" id="pregnancy_tt">Pregnancy</a></li>
      <li><a href="#scars" id="scars_tt">Scars</a></li>
      <li><a href="#immune_compromised_skin" id="immune_compromised_skin_tt">Immune Compromised Skin</a></li>
      <li><a href="#fat_and_cellulite" id="fat_and_cellulite_tt">Fat &amp; Cellulite</a></li>
      <li><a href="#vascular" id="vascular_tt">Vascular</a></li>
      <li><a href="#laser_hair_removal" id="laser_hair_removal_tt">Laser Hair Removal</a></li>
    </ul>

    <div class="tab-content">
      <div class="tab-pane fade active" id="acne_and_skin_health">
        ...
      </div>
      <div class="tab-pane fade" id="pigmentation_and_brightening">
        ...
      </div>
      <div class="tab-pane fade" id="anti_aging">
        ...
      </div>
      <div class="tab-pane fade" id="pregnancy">
        ...
      </div>
      <div class="tab-pane fade" id="scars">
        ...
      </div>
      <div class="tab-pane fade" id="immune_compromised_skin">
        ...
      </div>
      <div class="tab-pane fade" id="fat_and_cellulite">
        ...
      </div>
      <div class="tab-pane fade" id="vascular">
        ...
      </div>
      <div class="tab-pane fade" id="laser_hair_removal">
        ...
      </div>
    </div>        
  </div>
</div>

This is the relavent javascript call:

    <script>
  $('#treatment_tabs a:first').tab('show') // Select first tab
  $('#treatment_tabs a').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
  })
  $('#treatment_dropdown a').click(function (e) {
    e.preventDefault()        
    $(this).tab('show')
  })
</script>

Answer 1

The element which can be tabbed is the a (anchor) not the content. So click a link in your dropdown should active the tab() on a anchor of your tabbar:

  $('#treatment_dropdown a').click(function (e) {
    e.preventDefault()        
    $($(this).attr('href')+'_tt').tab('show')
  })