Clicking on logo redirects to a specific Bootstrap Tab and makes it active

Question

I read pretty much all related posts in order to find a solution to my simple problem, but with little success.

What I want is simple: when a user clicks on the brand (logo), it should redirect him to a specific tab and also make it active (clicked).

Can someone show me how can this be done?

Brand:

    <div class="navbar-header">            
    <a class="navbar-brand" href="#menu2" data-toggle="tab" ><img 
src="includes/images/logo.png" alt="Logo" class="logo"></a>
  </div>

Main:

<div class="container">
         <section id="main" >
            <ul class="nav nav-tabs right-to-left" id="myTab" >
               <li class="active"><a data-toggle="tab" href="#menu2"></a></li>
               <li><a data-toggle="tab" href="#menu0"></a></li>
               <li><a data-toggle="tab" href="#menu1"></a></li>
               <li><a data-toggle="tab" href="#menu2"></a></li>
               <li><a data-toggle="tab" href="#menu3"></a></li>
            </ul>

            <div class="tab-content">
               <div id="menu0" class="tab-pane fade in active">
               <div id="menu1" class="tab-pane fade">
               <div id="menu2" class="tab-pane fade">
               <div id="menu3" class="tab-pane fade">

Currently I managed to open the tab with this line of code:

<a data-toggle="tab" href="#menu2">

What else do I need to also make the #menu2 tab active?

EDIT: Tried the solution here: Linking to a Bootstrap Tab from outside - how to set the tab to “active”? but still not working.

Possible duplicate of [Linking to a Bootstrap Tab from outside - how to set the tab to "active"?](http://stackoverflow.com/questions/19814481/linking-to-a-bootstrap-tab-from-outside-how-to-set-the-tab-to-active) — Derek, May 26 '16 at 21:43

score 0 · Answer 1 · answered May 26 '16 at 21:39

0

Try this:

$('.navbar-brand').on('click', function(){
   $('#menu0').tab('show');
})

or

$('.navbar-brand').on('click', function(){
   $('#menu0').click();
})

from: http://getbootstrap.com/javascript/#tabs-usage

answered May 26 '16 at 21:39

Scott Simpson

3,832
3
27
35

Does the first way show the tab? If not, do you have console errors? – Scott Simpson May 26 '16 at 21:45
It shows because I have this line of code: – Json May 26 '16 at 21:53
The active issue is what bothers me. No console errors either. – Json May 26 '16 at 21:53

Gleb Kemarsky · Accepted Answer · 2016-06-02T06:04:13.923

Bootstrap. Open the certain tab by clicking on the link at the page

1. By clicking on the Logo and Navbar's items

I've set up the logo, the menus and tabs. Now each of these switches the text panels.

I've used links with data-toggle="tab" everywhere. And I've wrote the script, which coordinates the active items in <ul class="nav navbar-nav"> and <ul class="nav nav-tabs" id="myTab">.

Please check the result:

http://www.bootply.com/Nz8uh6pWC6

$( document ).ready(function() {
  var CLASS_NAVBAR    = '.navbar .navbar-nav';
  var CLASS_NAV_TABS  = '#myTab';
  var CLASS_LI_ACTIVE = '>li[class="active"]';

  $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
    var classTarget   = '>li>a[href="' + $(e.target).attr( 'href' ) + '"]';
    var selectNavbar  = $( CLASS_NAVBAR   + classTarget );
    var selectNavTabs = $( CLASS_NAV_TABS + classTarget );

    if ( !selectNavbar.parent().hasClass( 'active' ) ) {
      $( CLASS_NAVBAR + CLASS_LI_ACTIVE ).removeClass( 'active' );
      selectNavbar.parent().addClass( 'active' );
    }

    if ( !selectNavTabs.parent().hasClass( 'active' ) ) {
      $( CLASS_NAV_TABS + CLASS_LI_ACTIVE ).removeClass( 'active' );
      selectNavTabs.parent().addClass( 'active' );
    }
  })
});

 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.panel {
  border-radius: 0 0 4px 4px;
  border-top-width: 0;
}

<div class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" data-toggle="tab" href="#menu2">Brand</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a data-toggle="tab" href="#menu0">Menu 0</a></li>
      <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
      <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
      <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
    </ul>
  </div>
</div>  

<section id="main">
  <div class="container">
    <ul class="nav nav-tabs right-to-left" id="myTab">
      <li class="active"><a data-toggle="tab" href="#menu0">Menu 0</a></li>
      <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
      <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
      <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
    </ul>
    
    <div class="tab-content panel panel-default">
      <div id="menu0" class="tab-pane fade in active"><div class="panel-body"><h4>Content 0</h4></div></div>
      <div id="menu1" class="tab-pane fade"><div class="panel-body"><h4>Content 1</h4></div></div>
      <div id="menu2" class="tab-pane fade"><div class="panel-body"><h4>Content 2</h4></div></div>
      <div id="menu3" class="tab-pane fade"><div class="panel-body"><h4>Content 3</h4></div></div>
    </div>
  </div>
</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

2. By clicking on the Logo only

http://www.bootply.com/xFNf7m2SiG

$( document ).ready(function() {
  var CLASS_NAV_TABS  = '#myTab';
  var CLASS_LI_ACTIVE = '>li[class="active"]';

  $( 'a.navbar-brand' ).click( function (e) {
    var selectNavTabs = $( CLASS_NAV_TABS + '>li>a[href="' + $(e.target).attr( 'href' ) + '"]' );

    if ( !selectNavTabs.parent().hasClass( 'active' ) ) {
      $( CLASS_NAV_TABS + CLASS_LI_ACTIVE ).removeClass( 'active' );
      selectNavTabs.parent().addClass( 'active' );
    }
  })
});

 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.panel {
  border-radius: 0 0 4px 4px;
  border-top-width: 0;
}

<div class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" data-toggle="tab" href="#menu2">Brand</a>
    </div>
    <ul class="nav navbar-nav">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>  

<section id="main">
  <div class="container">
    <ul class="nav nav-tabs right-to-left" id="myTab">
      <li class="active"><a data-toggle="tab" href="#menu0">Menu 0</a></li>
      <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
      <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
      <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
    </ul>
    
    <div class="tab-content panel panel-default">
      <div id="menu0" class="tab-pane fade in active"><div class="panel-body"><h4>Content 0</h4></div></div>
      <div id="menu1" class="tab-pane fade"><div class="panel-body"><h4>Content 1</h4></div></div>
      <div id="menu2" class="tab-pane fade"><div class="panel-body"><h4>Content 2</h4></div></div>
      <div id="menu3" class="tab-pane fade"><div class="panel-body"><h4>Content 3</h4></div></div>
    </div>
  </div>
</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Clicking on logo redirects to a specific Bootstrap Tab and makes it active

2 Answers2

Bootstrap. Open the certain tab by clicking on the link at the page

1. By clicking on the Logo and Navbar's items

2. By clicking on the Logo only