jquery - 单击 Logo 会重定向到特定的 Bootstrap 选项卡并使其处于事件状态

Question

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

我想要的很简单:当用户点击品牌( Logo )时，它应该将他重定向到特定选项卡，并使其事件(点击)。

有人可以告诉我如何做到这一点吗？

品牌:

    <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

Bootstrap 。单击页面上的链接打开特定选项卡

1。通过单击 Logo 和导航栏的元素

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

我使用了 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。仅单击 Logo

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>