1

我将在下面发布 html 和 javascript 以使事情变得清晰......但在我这样做之前，我将解释一下我想要完成的事情。

基本上我想让一些页面在不重新加载页面的情况下打开。那是成功完成的。现在，我找不到任何关于如何使被点击的页面在页面加载/重新加载时保持打开状态的解决方案。

<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 的帮助！

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

干杯。

4

1 回答 1

1

如果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();
    }
});

更新

添加了一个演示。

于 2012-09-15T01:20:37.863 回答