在页面之间维护 Bootstrap 的已激活导航选项卡答案

【问题标题】：Maintain Bootstrap's activated nav-tab between page在页面之间维护 Bootstrap 的已激活导航选项卡
【发布时间】：2015-01-08 20:22:27
【问题描述】：

我使用的是Bootstrap 3。我目前有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 时遇到了麻烦

和

我只是想知道是否有人做过类似的事情？有更好的解决方案吗？请提供示例代码。

【问题讨论】：

标签： javascript twitter-bootstrap-3 url-parameters

【解决方案1】：

下面是我解决这个问题的方法

我给我的引用链接一个名为 viewToEdit 的类名，然后我停止了链接的默认行为（否则它将忽略以下代码）。我使用 jQuery 提取了当前激活的选项卡 ID，并将其附加到我的目标 URL。下面是我的代码。

$("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"));
    }
});

【讨论】：

【解决方案2】：

我认为你可以使用：

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

另见：

【讨论】：