创建具有持久选项卡的网页答案

【问题标题】：Creating a webpage with persistent tabs创建具有持久选项卡的网页
【发布时间】：2014-08-23 00:55:58
【问题描述】：

我正在尝试创建一个在同一页面上有多个选项卡的网页。我需要这些选项卡通过刷新保持不变，并能够将用户重定向到具有特定选项卡的页面。目前，我只是为每个选项卡使用 JavaScript 和不同的 div，隐藏所有选项卡，然后显示选择的选项卡。但是，在刷新或被定向到页面时，第一个标签始终是打开的。

我看到带有使用以下格式的选项卡的页面的 URL：

http://www.website.com/profile.php#tab

如果这是一种可接受的持续标签化网页的方法，那么这是如何完成的？如果这只是我的一个错误观察，我将如何制作这些持久标签？

【问题讨论】：

JavaScript cookie 怎么样？

标签： javascript php jquery html tabs

【解决方案1】：

有许多框架提供这种基于“哈希”的导航，或者您可以使用 jQuery hashchange 插件或使用 Backbone.js 自行实现某些功能路由器类。

你甚至可以自己实现一些东西：

var myTabClicked = function() {
    // display mytab
};

$('.mytab').bind('click', myTabClicked);

$(function() {
    if (window.location.hash == "#mytab") {
        myTabClicked();
    } else {
        // display default tab unless already displayed by default
    }
});

【讨论】：

谢谢，我现在就实现！

【解决方案2】：

你可以像这样使用在 body 标签中调用的函数...

<body onload="Javascript:checkTab();">

要检查页面是否像这样刷新...

function checkTab() {
if( document.refreshForm.visited.value == "" )
  {
    // This is a fresh page load
    document.refreshForm.visited.value = "1";
  }
else
  {
    // This is a page refresh

    // This checks the contents of the hash
    var hash = window.location.hash.substr(1);

    // Insert code here like an if statement that checks
    // if the variable "hash" is the name of a specific tab.
    // If the hash is the name of a tab, unhide the tab
  }
}

【讨论】：