在 Javascript 中使用 LocalStorage
Using LocalStorage in Javascript
我有侧边导航栏:
<li class="side-nav-tab">
<a href="/item"><i class="fa fa-dashboard fa-fw"></i> Items<span></span></a>
</li>
<li class="side-nav-tab">
<a href="/client"><i class="fa fa-bar-chart-o fa-fw"></i> Clients<span></span></a>
</li>
<li class="side-nav-tab">
<a href="/quote"><i class="fa fa-table fa-fw"></i> Quotes<span></span></a>
</li>
jQuery:
$(document).ready(function(){
$('.side-nav-tab').on('click', function(){
var arrow = $(this).find('span').attr('class');
if ((arrow == undefined) || (arrow == '')) {
$('.side-nav-tab').find('span').not(this).removeClass('fa arrow');
$(this).find('span').addClass('fa arrow');
}
})
})
上面的代码有效(将 class 'fa arrow' 添加到跨度中)但这只是暂时的。问题是,当您单击 $('.side-nav-tab') 时,它会将您定向到该路线,重新加载页面,然后我丢失了刚刚添加的 'fa arrow' class。
经过一些研究,我似乎可以使用 localStorage,但尝试失败:
var storage = localStore.getItem(arrow)
有什么想法吗?
谢谢
不要尝试为此使用本地存储。正确且更简单的方法是使用 preventDefault()
来防止 link 触发。试试这个事件处理程序:
$('.side-nav-tab').on('click', function(e){
e.preventDefault();
var arrow = $(this).find('span').attr('class');
if ((arrow == undefined) || (arrow == '')) {
$('.side-nav-tab').find('span').not(this).removeClass('fa arrow');
$(this).find('span').addClass('fa arrow');
}
});
我有侧边导航栏:
<li class="side-nav-tab">
<a href="/item"><i class="fa fa-dashboard fa-fw"></i> Items<span></span></a>
</li>
<li class="side-nav-tab">
<a href="/client"><i class="fa fa-bar-chart-o fa-fw"></i> Clients<span></span></a>
</li>
<li class="side-nav-tab">
<a href="/quote"><i class="fa fa-table fa-fw"></i> Quotes<span></span></a>
</li>
jQuery:
$(document).ready(function(){
$('.side-nav-tab').on('click', function(){
var arrow = $(this).find('span').attr('class');
if ((arrow == undefined) || (arrow == '')) {
$('.side-nav-tab').find('span').not(this).removeClass('fa arrow');
$(this).find('span').addClass('fa arrow');
}
})
})
上面的代码有效(将 class 'fa arrow' 添加到跨度中)但这只是暂时的。问题是,当您单击 $('.side-nav-tab') 时,它会将您定向到该路线,重新加载页面,然后我丢失了刚刚添加的 'fa arrow' class。
经过一些研究,我似乎可以使用 localStorage,但尝试失败:
var storage = localStore.getItem(arrow)
有什么想法吗?
谢谢
不要尝试为此使用本地存储。正确且更简单的方法是使用 preventDefault()
来防止 link 触发。试试这个事件处理程序:
$('.side-nav-tab').on('click', function(e){
e.preventDefault();
var arrow = $(this).find('span').attr('class');
if ((arrow == undefined) || (arrow == '')) {
$('.side-nav-tab').find('span').not(this).removeClass('fa arrow');
$(this).find('span').addClass('fa arrow');
}
});