1

In a menu item I have a dropdown menu like below. When "General Item is clicked" the system goes to a page "profile" that has some tabs, this is working fine.

But when the "Item 1" is clicked I want to go to that "profile" page but show the tab correspondent to "Item 1" as active. And the same for when the "Item 2 is clicked", show the tab correspondent to "Item 2" as active. Do you know how to do that?

Dropdown menu:

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="userDropdown"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        User
    </a>
    <div class="dropdown-menu" aria-labelledby="userDropdown">
        <a class="dropdown-item text-gray" href="/profile/item1">Item 1</a>
        <a class="dropdown-item text-gray" href="/profile/item2">Item 2</a>
        <a class="dropdown-item text-gray" href="/profile">General Item</a>
    </div>
</li>

That page with some tabs is like this:

<div class="container nopadding py-4">
  <div class="row mt-3">
    <div class="col-12">
      <ul class="nav nav-pills bg-light-gray registration_form_list" role="tablist">
        <li class="">
          <a class="nav-link active" href="#item1" data-toggle="tab" role="tab">
             <span class="d-none d-lg-inline-block">Item 1</span></a>
        </li>
        <li class="disabled">
          <a class="nav-link" href="#item2" data-toggle="tab" role="tab">
             <span class="d-none d-lg-inline-block">Item 2</span></a>
        </li>

        <li class="disabled">
          <a class="nav-link" href="#item3" data-toggle="tab" role="tab">
             <span class="d-none d-lg-inline-block">Item 3</span></a>
        </li>
      </ul>
      <div class="tab-content registration_body bg-white" id="myTabContent">
        <div class="tab-pane fade show active clearfix" id="item1" role="tabpanel"
             aria-labelledby="home-tab">

          Content 1
        </div>
        <div class="tab-pane fade clearfix" id="item2" role="tabpanel"
             aria-labelledby="profile-tab">
          Content 2

        </div>
        <div class="tab-pane clearfix fade" id="item3" role="tabpanel"
             aria-labelledby="contact-tab">
          Content 3
        </div>
      </div>
    </div>
  </div>
</div>

JS:

$(function($) {
     var path = window.location.href; 
     $('.registration_form_list a').each(function() {
      if (this.href === path) {
       $(this).addClass('active');
      }
     });
});
Icarus
  • 1,627
  • 7
  • 18
  • 32
  • Thanks, like this "Item 1" and " Item 2" is not working. –  Feb 06 '18 at 14:43
  • Looks like bootstrap tabs is rubbish and doesn't handle the hash in the url. this may help: https://stackoverflow.com/questions/7862233/twitter-bootstrap-tabs-go-to-specific-tab-on-page-reload-or-hyperlink – Pete Feb 06 '18 at 15:53
  • Thanks, like this "$('.registration_form_list a').on('shown.bs.tab', function (e) { window.location.hash = e.target.hash; }) $('#sidebarCollapse').on('click', function () { $('#sidebar').toggleClass('active'); $('.adminContainer').addClass('disable_scroll'); });" is also not working. –  Feb 06 '18 at 17:15
  • checkout this [answer](https://stackoverflow.com/questions/47905965/why-is-this-code-not-making-the-page-number-grey-when-its-clicked-on/47906025#47906025) – jasinth premkumar Feb 06 '18 at 17:20

0 Answers0