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添加到网址时遇到了麻烦

<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
});

另见：

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

在页面之间维护Bootstrap的激活导航标签

2 个答案: