Bootstrap 3 - 将页面刷新到特定选项卡

Posted 2023-03-05

【中文标题】Bootstrap 3 - 将页面刷新到特定选项卡

【英文标题】：Bootstrap 3 - Refreshing page to specific tab

【发布时间】：2016-01-28 02:21:56

【问题描述】：

我有一个带有 5 个选项卡的页面 - 单击任何选项卡上的“保存”按钮后，它应该执行诸如验证和将数据发布到控制器之类的任务 - 工作正常。一旦 Ajax 调用返回成功，它就会调用警报，让用户知道它已成功保存数据，然后（这是出错的地方）刷新页面；返回同一标签。

目前它只是将 URL 栏地址修改为右侧选项卡，但实际上并没有刷新页面。 我必须手动按 URL 栏上的 Enter 键才能刷新。

我的 document.ready 中有这段代码：

$(function () 
            var hash = window.location.hash;
            hash && $('ul.nav a[href="' + hash + '"]').tab('show');

            $('.nav-tabs a').click(function (e) 
                $(this).tab('show');
                var scrollmem = $('body').scrollTop();
                window.location.hash = this.hash;
                $('html,body').scrollTop(scrollmem);
            );
        );

这是我的 Ajax 函数 - 它可以工作，但刷新页面的代码在上面详述。

$.ajax(
     type: "POST",
     url: '@Url.Action("AddNewAssessment","ChangeManagement")',
     dataType: "text",
     contentType: "application/json; charset=utf-8",
     data: JSON.stringify(dataList)
).done(function (data) 
     if (data == "Success") 
         alert("Saved successfully");
         var test = window.location.href + "tab_Assessment";
         window.location.href = test;
      
).fail(function () 
     alert("There was a problem, please try again.");
);

我做错了什么？

根据我所做的研究，似乎没有人有这个问题（我查看了多个 SO 问题。）

【参考方案1】：

您不应该使用 location.href 来更改选项卡。 查找关于标签的Bootstrap-Doku 以手动更改标签。

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

【参考方案2】：

好的，所以我设法弄清楚了。 我没有尝试根据我所在的功能加载页面，而是简单地使用 localStorage 来保存我来自哪个选项卡，然后在我重新加载页面后，我可以访问 localStorage 并打开该选项卡。

                    $.ajax(
                        type: "POST",
                        url: '@Url.Action("etc","data")',
                        dataType: "text",
                        contentType: "application/json; charset=utf-8",
                        data: JSON.stringify(dataList)
                    ).done(function (data) 
                        if (data == "Success") 
                            alert("Edit successful");
                            localStorage.setItem('tab', "CAB");
                            location.reload();
                        
                    ).fail(function () 
                        alert("There was a problem, please try again.");
                    );

在 document.ready 上：

    $(document).ready(function () 
    if (localStorage.getItem('tab')) 
        var tab = "#tab_" + localStorage.getItem('tab');
        $('[href=' + tab + ']').tab('show');
        localStorage.clear();
    

    $(function () 
        var hash = window.location.hash;
        hash && $('ul.nav a[href="' + hash + '"]').tab('show');

        $('.nav-tabs a').click(function (e) 
            $(this).tab('show');
            var scrollmem = $('body').scrollTop();
            window.location.hash = this.hash;
            $('html,body').scrollTop(scrollmem);
        );
    );