解決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 tabvar 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) 

 

解決Twitter Bootstrap Tab URL連結問題