如何在导航和返回后保持页面状态?

时间:2016-02-17 02:33:33

标签: jquery html css button

我创建了一个扩展阅读更多部分的按钮。这很好。

// CODE TO EXTEND READ MORE SECTION
$("#readMoreDiary").on("click", function(){

    $("#diary-content").addClass("showTextThree");
    $("#readMoreDiary").addClass("hide");
    $("#closeDiary").removeClass("hideExitDiary");

    $(".showTextThree").addClass("animated fadeIn");
    $(".showTextThree").one("animationend",function(){

        $(this).removeClass("animated fadeIn");
    });
});

从page2.php返回到索引页面时,我希望“阅读更多”部分保持打开状态。 (将从阅读更多部分访问page2.php。)

因此,如果某人正在查看扩展阅读更多部分,请点击第2页的链接,然后返回,我想返回索引页面但并阅读更多部分< /强>

我该如何解决这个问题?

1 个答案:

答案 0 :(得分:1)

一种可能的解决方案,因为您似乎需要维护状态。 使用Localstorage,在从home转换到page2时设置标志,并在从page2转换回home时,取消设置标志。 检查标志,并显示&#34; EXTENDED VERSION&#34;

<script type="text/javascript">
$(document).ready(function(){
    var ls = $.localStorage;
    var flag = ls.get("flag_show");

    if( flag != null && flag == true ) {
        $("#diary-content").addClass("showTextThree");
        $("#readMoreDiary").addClass("hide");
        $("#closeDiary").removeClass("hideExitDiary");

        // UNSET THE FLAG IF YOU DON'T NEED TO MAINTAIN STATES
        ls.remove("flag_show");
    }

    $("#readMoreDiary").on("click", function(){
         // your code here
         // SET THE FLAG IN LOCALSTORAGE
         ls.set("flag_show", true);
     });
});


</script>

使用here

中的jQuery的LocalStorage API