How to maintain jquery dynamic content from missing when reloading?

Question

My problem is when I click a link (example Second Page ) it will display a second page on screen. But when I reloading, the current page is not saved and it revert to default page. How do I keep the desired page from refreshing to default page?

script:

<script type="text/javascript"> 
            $(function(){
                    $('.myFirst').hide();
                    $('.mySecond').hide();
                    $('.myThird').hide();
                $('#show_first').click(function(){
                    $('.myFirst').show();
                    $('.mySecond').hide();
                    $('.myThird').hide();
                    return false;
                });
                $('#show_second').click(function(){
                    $('.myFirst').hide();
                    $('.mySecond').show();
                    $('.myThird').hide();
                    return false;
                });
                $('#show_third').click(function(){
                    $('.myFirst').hide();
                    $('.mySecond').hide();
                    $('.myThird').show();
                    return false;
                });
            });
        </script>
</script>

html:

<a href="" id="show_first">First</a>
<a href="" id="show_second">Second</a>
<a href="" id="show_third">Third</a>

<div class="container">
        <div class="myFirst">
            <div class="row">
                <center>
                    First Page
                </center>
             </div>
        </div>
        <div class="mySecond">
            <div class="row">
                <center>
                    Second Page
                </center>
             </div>
        </div>
        <div class="myThird">
            <div class="row">
                <center>
                    Third Page
                </center>
             </div>
        </div>
</div>

Answer 1

You can use the jQuery Cookie Plugin to save a cookie of the showing section. And your code can be made much shorter:

$(function(){
    var page = $.cookie( 'page' ),
        pages = $( '.container' ).children( 'div' );
    pages.hide();
    ( page === undefined ) || $( page ).show();
    $('#show_first,#show_second,#show_third').click(function(){
        var index = $(this).index( 'a[id^=show_]' ),
            curPage;
        curPage = '.' + pages.eq( index ).attr( 'class' );
        pages.hide().eq( index ).show();
        $.cookie( 'page', curPage );
        return false;
    });
});

JS FIDDLE DEMO ver. 1

EDIT

The code has been edited to make clearer and shorter.

JS FIDDLE DEMO ver. 2

Answer 2

You can try to make url hash following your clicks:

$(function(){
    $('.myFirst').hide();
    $('.mySecond').hide();
    $('.myThird').hide();
    $('#show_first').click(function(){
        parent.location.hash = 'first';
        $('.myFirst').show();
        $('.mySecond').hide();
        $('.myThird').hide();
        return false;
    });
    $('#show_second').click(function(){
        parent.location.hash = 'second';
        $('.myFirst').hide();
        $('.mySecond').show();
        $('.myThird').hide();
        return false;
    });
    $('#show_third').click(function(){
        parent.location.hash = 'third';
        $('.myFirst').hide();
        $('.mySecond').hide();
        $('.myThird').show();
        return false;
    });
    $('#show_' + parent.location.hash.substr(1)).click();
});

note: those urls are bookmarkable ;)