如何保持页面重新加载菜单状态

Question

我有以下代码片段，想知道是否有可能通过更新来实现此菜单行为：

步骤1.在鼠标悬停 链接1 -—>上，它将转换为1.5em到右侧（已设置）；

第2步。在 链接1上， 单击---->菜单按钮也将保持在 页面重新加载时 已经平移的位置） ，直到单击新菜单按钮 （未设置）为止 ）， 然后加载另一页 。

注意：“下一个/上一个”按钮的“代码”部分保持不变（或必须编辑，以保持其功能）。

note2：最后，我不得不提到，该解决方案将在wordpress中实现，而不是在静态html站点页面中实现。

$(function () {

    $('nav ul li').click(function (e) {

        //Set the aesthetics (similar to :hover)

        $('nav ul li')

        .not(".clicked").removeClass('hovered')

        .filter(this).addClass("clicked hovered")

        .siblings().toggleClass("clicked hovered", false);

    }).hover(function () {

        $(this).addClass("hovered")

    }, function () {

        $(this).not(".clicked").removeClass("hovered")

    });



    var pageSize = 4,

        $links = $(".pagedMenu li"),

        count = $links.length,

        numPages = Math.ceil(count / pageSize),

        curPage = 1;



    showPage(curPage);



    function showPage(whichPage) {

        var previousLinks = (whichPage - 1) * pageSize,

            nextLinks = (previousLinks + pageSize);

        $links.show();

        $links.slice(0, previousLinks).hide();

        $links.slice(nextLinks).hide();

        showPrevNext();

    }



    function showPrevNext() {

        if ((numPages > 0) && (curPage < numPages)) {

            $("#nextPage").removeClass('hidden');

            $("#msg").text("(" + curPage + " of " + numPages + ")");

        } else {

            $("#nextPage").addClass('hidden');

        }

        if ((numPages > 0) && (curPage > 1)) {

            $("#prevPage").removeClass('hidden');

            $("#msg").text("(" + curPage + " of " + numPages + ")");

        } else {

            $("#prevPage").addClass('hidden');

        }

    }



    $("#nextPage").on("click", function () {

        showPage(++curPage);

    });

    $("#prevPage").on("click", function () {

        showPage(--curPage);

    });



});


.hidden {

    display: none;

}



body {

    font: normal 1.0em Arial, sans-serif;





}





nav.pagedMenu {

    color: red;

    font-size: 2.0em;

    line-height: 1.0em;

    width: 8em;

    position: fixed;

    top: 50px;

}



nav.pagedMenu ul {



    list-style: none;

    margin: 0;

    padding: 0;

}



nav.pagedMenu ul li {

    height: 1.0em;

    padding: 0.15em;

    position: relative;

    border-top-right-radius: 0em;

    border-bottom-right-radius: 0em;

    -webkit-transition:

    -webkit-transform 220ms, background-color 200ms, color 500ms;

    transition: transform 220ms, background-color 200ms, color 500ms;

}





nav.pagedMenu ul li.hovered {

    -webkit-transform: translateX(1.5em);

    transform: translateX(1.5em);

}

nav ul li:hover a {

    transition: color, 1200ms;

    color: red;

}

nav.pagedMenu ul li span {

    display:block;

    font-family: Arial;

    position: absolute;

    font-size:1em;

    line-height: 1.25em;

    height:1.0em;

    top:0; bottom:0;

    margin:auto;

    right: 0.01em;

    color: #F8F6FF;



}



a {

    color: gold;

    transition: color, 1200ms;

    text-decoration: none;

}



#pagination, #prevPage, #nextPage {

    font-size: 1.0em;

    color: gold;

    line-height: 1.0em;

    padding-top: 250px;

    padding-left: 5px;

}


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav class="pagedMenu">

   <ul style="font-size: 28px;">

        <li class="" style="margin-bottom: 5px;"><a href="#">Link 1</a></li>

        <li class="" style="margin-bottom: 5px;"><a href="#">Link 2</a></li>

        <li class="" style="margin-bottom: 5px;"><a href="#">Link 3</a></li>

        <li class="" style="margin-bottom: 5px;"><a href="#">Link 4</a></li>

        <li class="" style="margin-bottom: 5px;"><a href="#">Link 5</a></li>

        <li class="" style="margin-bottom: 5px;"><a href="#">Link 6</a></li>

        <li class="" style="margin-bottom: 5px;"><a href="#">Link 7</a></li>

        <li class="" style="margin-bottom: 5px;"><a href="#">Link 8</a></li>

        <li class="" style="margin-bottom: 5px;"><a href="#">Link 9</a></li>

        <li class="" style="margin-bottom: 5px;"><a href="#">Link 10</a></li>

        <li class="" style="margin-bottom: 5px;"><a href="#">Link 11</a></li>

        <li class="" style="margin-bottom: 5px;"><a href="#">Link 12</a></li>

  </ul>

</nav>



<div id="pagination">

    <a href="#" id="prevPage" class="hidden">Previous</a>&nbsp;&nbsp;

    <a href="#" id="nextPage" class="hidden">Next</a>

    <span id="msg"></span>

</div>

LE：关于@Lars评论：

此状态将应用于 所有用户 （我认为？，这是最好的选择，只要菜单将显示在每个页面上，而不受浏览器类型或会话的限制）；

另外，关于存储位置，在服务器端本地保存状态不是问题，但是如果我有一些赞成/反对意见，可以做出正确的决定，那将会很好。

最后，如果有帮助，为了查看整个图片，您可以使用此实时链接作为示例；这里有一个与上面描述的菜单类似的菜单，并且关于状态，如果这里有可以实现的模型，我会很高兴找到它。

Answer 1

您可以将菜单（和页面）状态保存在localStorage变量中。在页面加载时，检查变量是否存在，并设置正确的链接/页面状态。