Question

我有两个链接。首先转到带有默认激活选项卡的页面，然后转到第二个链接 - 到第二个选项卡

我总是激活默认选项卡。

这是我的js代码（打开标签#home）：

$('.activate_tab').click(function(e){
  $('#myTab a[href="#profile"]').tab('show');
});

也试过（没做任何事）：

$('.activate_tab').click(function(e){
   e.preventDefault();
   $('#myTab a[href="#profile"]').tab('show');
});

和我的默认Bootstrap HTML代码：

 <ul id="myTab" class="nav nav-tabs">
  <li class="reports active left"><a href="#home" data-toggle="tab" >Details</a></li>
  <li class="reports right not_active" ><a href="#profile" data-toggle="tab">Analytics</a></li>
 </ul>
 ...
 <div class="tab-pane fade in active" id="home">//default
 ...
 <div class="tab-pane fade" id="profile">//not default
 ...
 //link on other page, which should activate default( home )tab
  <a href="/websites/4">http://super.com</a> 
 //link on other page, which should activate not default tab
   <a href="/websites/4" class="activate_tab"><img alt="" height="19" src="http://127.0.0.1:3000/assets/analytics.png" ></a>

我想要的是什么？

Answer 1

我改变了我的链接：

  <a href="/websites/4#profile" class="activate_tab">aaa</a>

和我的JavaScript：

var activeTab = $('[href=' + location.hash + ']');
activeTab && activeTab.tab('show');

$('.activate_tab').click(function(e){
$('#myTab a[href="#profile"]').tab('show');
});

Answer 2

试试这个

   <div class="tab-pane fade" id="home">//default
 ...
 <div class="tab-pane fade in active" id="profile">//not default

或者您可以试试第二个链接页面

$('#myTab a:last').tab('show'); // Select last tab
$('#myTab li:eq(1) a').tab('show');

如何从外页激活默认的Bootstrap选项卡？

2 个答案: