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

【问题标题】：Bootstrap 3 - Refreshing page to specific tabBootstrap 3 - 将页面刷新到特定选项卡
【发布时间】：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 问题。）

【问题讨论】：

标签： javascript ajax redirect razor href

【解决方案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);
        });
    });

【讨论】：