在页面重新加载时保留选定的指定页面 [英] Specified page remain selected on page reload

问题描述

我将在html和javascript下面发布以清楚地说明......但在我这样做之前，我会解释一下我想要完成的事情。

I will post below html and javascript to make things clear... But before I do that, I will explain a bit what I am trying to accomplish.

基本上我想让一些页面打开而不重新加载页面。这成功完成了。现在，我找不到任何解决方案，如何点击该页面，在页面加载/重新加载时保持打开状态。

Basically I want to make some pages to open without page reload. That was successfully done. Now, I cannot find any solution on how to make that page which is clicked, to remain opened on page load/reload.

<nav>
    <a href="#home">Home</a>
    <a href="#download">Download</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
</nav>

<div id="container">
<div id="home">
    Home
</div>

<div id="download">
    Download
</div>

<div id="about">
    About
</div>

<div id="contact">
    Contact
</div>
</div>

$(function(){
var $menuItems = $('nav a'),
    $container = $("#container");

$menuItems.on('click', function(e) {
    e.preventDefault();
    $(this.hash, $container).delay(300).fadeIn(1000).siblings().fadeOut(1000);
});
});​

感谢Marcus Ekwall对javascript的帮助！

Thanks to Marcus Ekwall for help on the javascript!

现在......我真的想知道如何在页面加载点击的菜单页面时使用这些href's重新加载，以及如何在首次访问时加载主页。因为我得到的是空白页面（没有内容），直到我点击其中一个菜单项。

Now... I am really wondering how can I use these href's to load clicked menu page when page is reloaded and also how to load home page on first visit. Cause what I get is blank page (no content) until I click on one of menu items.

干杯。

推荐答案

如果 localStorage 可以吗？

$(function() {
    var $menuItems = $('nav a'),
        $container = $("#container");

    $menuItems.on('click', function(e) {
        e.preventDefault();
        $(this.hash, $container).delay(300).fadeIn(1000).siblings().fadeOut(1000);
        localStorage.setItem('currentpage', this.hash);
    });
    if (localStorage.getItem('currentpage')) {
        $(localStorage.getItem('currentpage'), $container).siblings().hide();
    }
});

更新

添加了演示。

这篇关于在页面重新加载时保留选定的指定页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！