当我单击页面上的选项卡时，如何刷新整个页面？答案

【问题标题】：How do you refresh the whole page when I click on a tab on the page?当我单击页面上的选项卡时，如何刷新整个页面？
【发布时间】：2014-02-24 17:43:28
【问题描述】：

我的页面上有几个标签。当我单击一个选项卡时，我会显示一些附加在该选项卡中的 div 的图表。当我单击一个选项卡时，我需要先刷新页面，然后执行将在选项卡下加载的脚本。比如我有这样一段脚本：

$("a[href=#tab22]").click(function() {
        $.ajaxSetup({ cache: false });
        load_chart1();
            load_chart2();
});

如果我插入这一行，

location.reload();

就在 load_chart1() 函数调用之前，默认页面加载，我看不到 tab22 的内容，比如 chart1 和 chart2。

有没有简单的方法可以做到这一点？

当我点击tab22时，应该刷新整个页面并且执行tab22下的函数？

【问题讨论】：

如果您使用 ajax 更新页面的一部分，您会希望阻止默认的点击操作。获取 ajax 响应，然后调用您的函数。如果您需要实际的页面刷新，则需要做更多的工作...最简单的方法是使用查询字符串（或哈希）通知您的脚本需要更新。类似于：yourdomain.com/page?refreshFromTab=1（您的脚本在其中查找 refreshFromTab）

标签： javascript html

【解决方案1】：

如果您不打算通过 AJAX 刷新数据，则必须更新 URL 的哈希值并在页面加载时检查其值。

例如，在您的文档加载处理程序中：

var hash = window.location.hash,
    curtab;

console.log(hash);

switch(hash) {
    case "tab-1":
        curtab = document.getElementById('tab-1');
        break;
    case "tab-2":
        curtab = document.getElementById('tab-2');
        break;
    case "tab-3":
        curtab = document.getElementById('tab-3');
        break;
    case "tab-4":
        curtab = document.getElementById('tab-4');
        break;
    default:
        curtab = document.getElementById('tab-1');
        break;
}

curtab.style.display = 'block';
curtab.innerHTML = "pasted from js";

$('a').on('click', function(e) {
    e.preventDefault();
    window.location.hash = $(this).attr('href');
    window.location.reload();
});

【讨论】：