[英]How to use local storage for active class?
How do I keep cookie stored of selected menu item with local storage? 如何将所选菜单项的Cookie存储在本地存储中?
Menu - 菜单 -
<ul class="nav nav-pills">
<li class="active"><a href="#" >Customers</a></li>
<li><a href="#" >Statics</a></li>
<li><a href="#" >payroll</a></li>
</ul>
Toggling active class- 切换活动班级-
<script type="text/javascript">
$(function () {
$('.nav-pills li').click(function () {
$(this).siblings().removeClass('active');
$(this).addClass('active');
});
});
</script>
Using localstorage I tried- 我尝试使用本地存储-
<script type="text/javascript">
$(function () {
$('.nav-pills li').click(function () {
$(this).siblings().removeClass('active');
var menuactive = localStorage.setItem('mySelectValue', $(this).addClass('active');
$(this).addClass(localStorage.getItem('mySelectValue'));
});
});
</script>
Now this didn't help me. 现在,这没有帮助我。
How do I store active class in local storage? 如何将活动课程存储在本地存储中? I lose this active class when page is refreshed.
刷新页面后,我失去了这个活动课堂。 This question is asked many times but I didn't get any simple way of doing it.
这个问题被问过很多次,但是我没有任何简单的方法可以解决。
It seems like you want to remember which element had (last time, before refresh) the 'active' class. 似乎您想记住哪个元素(上次刷新之前)具有“活动”类。
So if you've got a known number of list items, you could just keep track of the index, and store that. 因此,如果您拥有已知数量的列表项,则只需跟踪索引并进行存储即可。
$(function () {
$('.nav-pills li').click(function () {
$(this).siblings().removeClass('active');
$(this).addClass('active');
var activeIndex = $(this).index();
localStorage.setItem('mySelectValue', activeIndex);
});
And then you can have an onload function, something like this... 然后您可以拥有一个onload函数,就像这样...
var activeIndex = localStorage.getItem('mySelectValue');
if (isNaN(activeIndex)) {
console.log('nothing stored');
} else {
$('.nav-pills li:nth-child('+activeIndex+')').addClass('active');
}
You will have to write code to persist the active class in local storage and retrieve active class from local storage. 您将必须编写代码以将活动类持久保存在本地存储中,并从本地存储中检索活动类。
localStorage.setItem('ActiveClass', ClassName);
var activeClass = localStorage.getItem('ActiveClass');
$(item).addClass(activeClass);
If you were using KnockoutJS http://knockoutjs.com/ then you can persist part of your viewModel in local storage. 如果您使用的是KnockoutJS http://knockoutjs.com/,则可以将部分viewModel保留在本地存储中。 This question discusses this.
这个问题对此进行了讨论。
How can I implement MVVM with offline storage and Knockout.js? 如何通过离线存储和Knockout.js实现MVVM?
Hope that helps. 希望能有所帮助。
$(this).addClass('active')
will return $(this)
, the jquery version of the li
clicked, which changes at each reload. $(this).addClass('active')
将返回$(this)
,即单击的li
的jquery版本,每次重新加载时都会更改。
What you need to store is an absolute reference, like the index of the li
that is clicked: 您需要存储的是绝对引用,例如单击的
li
的索引:
<script type="text/javascript">
$(function () {
$('.nav-pills li').click(function () {
$(this).siblings().addSelf().removeClass('active');
localStorage.setItem('mySelectValue', $(this).index());
$(this).addClass('active');
});
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.