如何在页面重新加载时保持菜单状态 [英] How to keep the menu state on page reload
问题描述
我有以下代码片段，想知道是否有可能对其进行更新以实现此菜单行为:
步骤 1. 在鼠标悬停时 Link 1 ----> 它将向右平移 1.5em(已设置)；
第 2 步.在 Link 1 上单击 ----> 菜单按钮将固定在已翻译的位置(完成，特别感谢 @guest271314)页面也重新加载，直到点击一个新的菜单按钮(尚未设置)另一个页面是加载.
注意:下一个/上一个按钮代码部分，保持不变(或者可以在必要时进行编辑，以保持功能).
note2: 最后我不得不提一下，该解决方案将在 wordpress 中实现，而不是静态的 html 站点页面.
$(function () {$('nav ul li').click(function (e) {//设置美感(类似于:hover)$('nav ul li').not(".clicked").removeClass('悬停').filter(this).addClass("点击悬停").siblings().toggleClass("点击悬停", false);}).悬停(功能(){$(this).addClass("悬停")}， 功能 () {$(this).not(".clicked").removeClass("hovered")});var pageSize = 4,$links = $(".pagedMenu li"),计数 = $links.length,numPages = Math.ceil(count/pageSize),当前页= 1;显示页(curPage)；功能 showPage(whichPage) {var previousLinks = (whichPage - 1) * pageSize,nextLinks = (previousLinks + pageSize);$links.show();$links.slice(0, previousLinks).hide();$links.slice(nextLinks).hide();showPrevNext();}函数 showPrevNext() {if ((numPages > 0) && (curPage < numPages)) {$("#nextPage").removeClass('隐藏');$("#msg").text("(" + curPage + " of " + numPages + ")");} 别的 {$("#nextPage").addClass('隐藏');}if ((numPages > 0) && (curPage > 1)) {$("#prevPage").removeClass('隐藏');$("#msg").text("(" + curPage + " of " + numPages + ")");} 别的 {$("#prevPage").addClass('隐藏');}}$("#nextPage").on("点击", function () {showPage(++curPage);});$("#prevPage").on("click", function () {showPage(--curPage);});});.hidden {显示:无；}身体 {字体:普通 1.0em Arial、sans-serif；}nav.pagedMenu {红色;字体大小:2.0em；行高:1.0em；宽度:8em；位置:固定；顶部:50px；}nav.pagedMenu ul {列表样式:无；边距:0；填充:0；}nav.pagedMenu ul li {高度:1.0em；填充:0.15em；位置:相对；边框右上角半径:0em；边框右下角半径:0em；-webkit-transition:-webkit-transform 220ms, background-color 200ms, color 500ms;过渡:transform 220ms，background-color 200ms，color 500ms；}nav.pagedMenu ul li.hovered {-webkit-transform: translateX(1.5em);变换:translateX(1.5em);}导航 ul li:悬停 {过渡:颜色，1200ms；红色;}nav.pagedMenu ul li span {显示:块；字体系列:Arial；位置:绝对；字体大小:1em；行高:1.25em；高度:1.0em；顶部:0；底部:0;保证金:自动；右:0.01em；颜色:#F8F6FF；}一种 {颜色:金色；过渡:颜色，1200ms；文字装饰:无；}#分页，#prevPage，#nextPage {字体大小:1.0em；颜色:金色；行高:1.0em；填充顶部:250px；左边距: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="#">链接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="#">链接 11</a></li><li class="" style="margin-bottom: 5px;"><a href="#">Link 12</a></li></nav><div id="分页"><a href="#" id="prevPage" class="hidden">Previous</a> <a href="#" id="nextPage" class="hidden">Next</a><span id="msg"></span>LE:关于@Lars 评论:
此状态将应用于每个所有用户(我认为?，只要菜单将显示在每个页面上，不受浏览器类型或会话的限制，这是最好的选择)；
另外关于存储位置，在服务器端本地保存状态不是问题，但是如果我有一些优点/缺点来做出正确的决定，那就太好了；
最后，如果这有帮助，为了看到全貌，您可以使用此实时链接作为示例;有一个与上述类似的菜单，关于状态，如果有可以在这里实现的模型，我会很高兴找到它.
您可以将菜单(和页面)状态保存在 localStorage 变量中.在页面加载时检查变量是否存在并设置正确的链接/页面状态.
https://github.com/julien-maurel/jQuery-Storage-API
I have the following code snippet and wanted to know if there is a possibility to update it achieving this menu behaviour:
Step 1. On mouse hover Link 1 ----> it will be translated 1.5em to the right (already set);
Step 2. On Link 1 click ----> the menu button will remain fixed in place at the already translated position (done, special thanks to @guest271314) on the page reload too, until a new menu button is clicked (not set yet) and another page is loaded.
note: next/prev buttons code section, remain unchanged (or can be edited if it's a must, in order to remain functional).
note2: I have to mention that in the end, the solution will be implemented in wordpress not into a static html sitepage.
$(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>
<a href="#" id="nextPage" class="hidden">Next</a>
<span id="msg"></span>
</div>
LE: regarding @Lars comment:
This state will be applied per all users (I think?, it's the best option as long as the menu will be displayed on every pages, unconditioned by the browser type or the session);
Also regarding the storage location, it's not a problem saving the state locally, server side, but it will be great if I have some pro/cons to make the right decision;
In the end, if this helps, in order to see the whole picture, you can use this live link as example; there is a similar menu with the above described and regarding the state, if there is a model that could be implemented here, I'll be glad to find it.
You can save menu (and page) status in a localStorage variable. On page load check if the variable exists and set correct Link/page status.
https://github.com/julien-maurel/jQuery-Storage-API
这篇关于如何在页面重新加载时保持菜单状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
