如何在页面重新加载时保持菜单状态
How to keep the menu state on page reload
我有以下代码片段,想知道是否有可能更新它实现此菜单行为:
步骤1。鼠标悬停链接1 ---->将向右平移1.5em(已设置);
步骤2。在链接1单击---->菜单按钮将保持固定在已经翻译的位置(完成,特别感谢@guest271314) 在页面上重新加载,直到一个新的菜单按钮被点击(尚未设置)和另一个页面被加载。
注意:next/prev按钮代码部分,保持不变(或者可以编辑,如果是必须的,为了保持功能)。
注2:我不得不提到,最后,解决方案将在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>
<a href="#" id="nextPage" class="hidden">Next</a>
<span id="msg"></span>
</div>
LE:关于@Lars评论:
此状态将应用于每个所有用户(我认为?(这是最好的选择,只要菜单将显示在每个页面,不受浏览器类型或会话的限制);
也关于存储位置,这不是一个问题,保存本地状态,服务器端,但它将是伟大的,如果我有一些赞成/反对做出正确的决定;
最后,如果这有帮助,为了看到整个画面,你可以使用这个活动链接作为例子;有一个类似上面描述的菜单,关于状态,如果有一个模型可以在这里实现,我将很高兴找到它。
您可以在localStorage变量中保存菜单(和页面)状态。在页面加载时检查变量是否存在,并设置正确的链接/页面状态。
https://github.com/julien-maurel/jQuery-Storage-API相关文章:
- ui路由器的惰性加载状态
- 在加载状态之前,我需要在angular js中为每个状态添加角色
- 在angular js中,每次应用程序进入状态时,重新加载状态的最佳方式是什么
- 表现出承诺'加载状态
- mediaelement.js/html5视频在前进过多或后退过多时永远保持加载状态
- Chrome应用程序:无法检索文件加载状态
- 将复选框重置为基于先前复选框的页面加载状态's状态
- UI 路由器不断重定向到索引,并且不加载状态/视图
- 引导手风琴.保留多个面板的页面加载状态
- 如何检测发布商 DFP 广告的 Google 双击的加载状态
- Angularjs ng-repeat中的Angleularjs按钮加载状态指令
- Redux-管理预加载状态
- p:fileDownload的策略,带有对话框和加载状态
- Knockout模板在某些情况下保持加载状态
- 当AJAX调用完成时重置Bootstrap加载状态按钮
- 刷新页面后在jtree中从加载状态返回数据
- 如何摆脱这个{{用户.Id}}(花括号)在页面处于加载状态时使用
- Ui-router加载状态,然后我怎么运行一个函数
- 如何显示加载状态的百分比ajax响应
- 如何监控图像源的完全加载状态