解決Twitter Bootstrap Tab URL連接問題

例如這樣的一個Tabs 代碼：

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#profile">Profile</a></li>
  <li><a data-toggle="tab" href="#settings">Settings</a></li>
</ul>

解決方法

在Tabs 頁面加入以下的腳本便可經過#tag 描點連接到某個具體的Tab 頁面：

$(function(){ // Javascript to enable link to tab
var url = document.location.toString(); if (url.match('#')) { $('#myTab a[href=#'+url.split('#')[1]+']').tab('show') ; } // Change hash for page-reload
$('#myTab a').on('shown', function (e) { window.location.hash = e.target.hash; }); })

Twitter Bootstrap Tab 基本使用方法

經過JavaScript啓用標籤(每一個選項卡須要激活單獨)：

$('#myTab a').click(function (e) { e.preventDefault(); $(this).tab('show'); }); 

你能夠激活標籤經過如下幾個方式：

('#myTab a[href="#profile"]').tab('show'); // Select tab by name
$('#myTab a:first').tab('show'); // Select first tab
$('#myTab a:last').tab('show'); // Select last tab
$('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)