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

javascriptのヘルプを提供してくれたMarcusEkwallに感謝します！

さて...ページがリロードされたときにクリックされたメニューページをロードするためにこれらのhrefをどのように使用できるのか、また最初の訪問時にホームページをロードする方法について本当に疑問に思っています。メニュー項目の1つをクリックするまで、空白のページ（コンテンツなし）が表示されます。

乾杯。

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 に答える