使用Bootstrap3 tabs網址轉跳後指定要開啟某個tabs,包含指定第二階的tabs。

指定連結到某個tab可使用一下網址參數做選取,tab1為第一階,tab2為第二階。

/index.html?tab1=2&tab2=3

程式碼

先在網址取得網址列參數後使用:eq(1)開啟指定的tabs。

//先取得網址字串,假設此頁網址為「index.aspx?id=U001&name=GQSM」
var url = location.href;

//再來用去尋找網址列中是否有資料傳遞(QueryString)
if (url.indexOf("?") != -1) {
    var tab1 = "";
    var tab2 = "";
    //在此直接將各自的參數資料切割放進ary中
    var ary = url.split("?")[1].split("&");
    //此時ary的內容為:
    //ary[0] = 'id=U001',ary[1] = 'name=GQSM'

    //下迴圈去搜尋每個資料參數
    for (i = 0; i <= ary.length - 1; i++) {
        //如果資料名稱為id的話那就把他取出來

        if (ary[i].split("=")[0] == "tab1") {
            tab1 = ary[i].split("=")[1];
        }
        if (ary[i].split("=")[0] == "tab2") {
            tab2 = ary[i].split("=")[1];
        }
    }
}
// 第一階顯示;
$(`#myTabs li:eq(${tab1}) a`).tab("show"); 
// 第二階顯示;
$(`#tabs-w .con-w:eq(${tab1}) li:eq(${tab2}) a`).tab("show");       

DEMO | 下載檔案 檔案使用bootstrap3 customize只提取tabs功能與樣式,所以檔案很小。

您也可能喜歡這些文章