Question

我的问题是，当我点击链接（例如第二页）时，它将在屏幕上显示第二页。但是当我重新加载时，当前页面没有保存，它恢复到默认页面。如何将所需页面从刷新页面保留到默认页面？

脚本：

<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

您可以使用jQuery Cookie Plugin保存显示部分的Cookie。而且您的代码可以缩短：

$(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

修改

代码已经过编辑，以便更清晰，更短。

JS FIDDLE DEMO ver. 2

Answer 2

您可以尝试在点击后制作网址哈希：

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

注意：这些网址是可收藏的;）

如何在重新加载时保持jquery动态内容不丢失？

2 个答案: