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

Creating a webpage with persistent tabs

本文关键字：网页 选项 创建      更新时间：2023-09-26

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

我见过一些带有标签页的url使用以下格式:

http://www.website.com/profile.php选项卡

如果这是一个可接受的方法来持久地制作一个网页，它是如何完成的?如果这只是我的错误观察，我该如何制作这些持久标签呢?

有很多框架提供这种基于"哈希"的导航，或者你可以使用jQuery hashchange插件自己实现，或者使用Backbone.js Router类。

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

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
    }
});

您可以使用在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
  }
}
相关文章：