在頁面之間維護Bootstrap的激活的導航標簽

Question

我正在使用Bootstrap3。我目前有2個頁面，一個是查看頁面，一個是編輯頁面。 兩個頁面都有許多導航標簽，例如id = tab1，tab2，tab3。

我想要實現的是，當我位於視圖頁面的tab2上時，如果單擊“編輯”按鈕，我將自動轉到編輯頁面的tab2。 當我進入編輯頁面的tab3時，如果按“取消”，我將自動進入查看頁面的tab3。

我當前的想法是將選項卡ID附加到URL參數，在頁面准備就緒時，頁面讀取將讀取URL並激活給定的選項卡。 這是我激活標簽頁的代碼。

$(document).ready(function(){
    activaTab(getUrlVars()["tabId"]);
});

function getUrlVars() {
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

function activaTab(tab){
    $('.nav-tabs a[href="#' + tab + '"]').tab('show');
};

但是，我在將id附加到單擊按鈕的URL時遇到麻煩

<a class="btn">

和

  <button type =“ submit” class =“ btn”> 

我只是想知道是否有人做過類似的事情？ 有更好的解決方案嗎？ 請提供示例代碼。

Answer 1

我認為您可以使用：

$('.btn').on('click',function(){
        window.location.href = 'edit.html' + window.location.hash; //the current hash
});

也可以看看：

• JavaScript用哈希值重新加載頁面
• 如何在JavaScript / jQuery中重定向到另一個網頁？

Answer 2

下面是我如何解決這個問題

我給我的ref鏈接一個名為viewToEdit的類名，然后我停止了該鏈接的默認行為（否則，它將忽略以下代碼）。 然后，我使用jQuery提取了當前激活的標簽頁ID，並將其附加到目標網址中。 下面是我的代碼。

$("a.viewToEdit").on('click', function(event) {
    event.preventDefault();
    var activatedDiv = $('div.tab-pane.form-tab-pane.active');
    if(typeof activatedDiv.attr("id") !== "undefined") {
        $(location).attr('href',$(this).attr("href")+"?tabId="+activatedDiv.attr("id"));
    } else {
        $(location).attr('href',$(this).attr("href"));
    }
});