单击徽标会重定向到特定的引导选项卡并使其处于活动状态

Question

为了找到解决我的简单问题的方法，我阅读了几乎所有相关的帖子，但收效甚微。

我想要的很简单：当用户点击品牌（徽标）时，它应该将他重定向到特定标签并使其活动（点击）。

谁能告诉我如何做到这一点？

品牌：

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

主要：

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

目前我设法用这行代码打开了标签：

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

我还需要什么来激活#menu2 选项卡？

编辑： 在这里尝试了解决方案： Linking to a Bootstrap Tab from outside - how to set the tab to “active”? 但仍然无法正常工作。

Answer 1

引导程序。通过单击页面上的链接打开特定选项卡

1。通过单击徽标和导航栏的项目

我已经设置了徽标、菜单和选项卡。现在每个都切换文本面板。

我在任何地方都使用了带有data-toggle="tab" 的链接。我已经编写了脚本，它协调<ul class="nav navbar-nav"> 和<ul class="nav nav-tabs" id="myTab"> 中的活动项目。

请检查结果：

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。仅通过单击徽标

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>

Answer 2

试试这个：

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

或

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

来自：http://getbootstrap.com/javascript/#tabs-usage