Question

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

我看过包含使用以下格式的标签页面的网址：

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

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

Answer 1

您可以使用在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
  }
}

Answer 2

有许多框架可以提供这种类型的＆＃34;哈希＆＃34;基于导航，或者您可以使用 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 个答案: