javascript - 维护 Bootstrap 在页面之间激活的导航选项卡

Question

我使用的是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 时遇到问题

<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 reload the page with hash value
• How to redirect to another webpage in JavaScript/jQuery?