The specified page remains selected on the reload page.

I will post html and javascript below so that everything is clear ... But before I do this, I will explain a bit what I'm trying to accomplish.

Basically, I want some pages to open without reloading the page. It has been successfully done. Now I cannot find a solution on how to make this page clicked in order to stay open on the load / reload page.

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

Thanks Marcus Ekwall for help in javascript!

Now ... I am really interested in how I can use these hrefs to load a page with the menu button pressed while reloading the page, as well as how to load the homepage on the first visit. The reason I get it is a blank page (without content) until I click on one of the menu items.

Greetings.

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

UPDATE

​​ .

+1

All Articles