jQuery Bootstrap tabs分頁應用兩階層連結開啟指定tab

1 月 16, 2020 | Javascript, | 0 comments

使用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 #myTabs li:eq(NULL) a
```).tab(show); 
// 第二階顯示;
$(```
#tabs-w .con-w:eq(NULL) li:eq(NULL) a
```).tab(show);         

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