如何在页面刷新时保持选定/活动的HTML链接颜色
How to keep selected/active HTML link color on page refresh?
编辑:
我想保持选中状态并在页面刷新时保持HTML链接颜色。我尝试了其他已经回答过的问题,但对我没有效果。
例如:
当我点击HTML链接分类HTML链接测验时,它会将颜色更改为红色,并保持页面刷新时的颜色。
HTML
<div id="col-navigation">
<ul>
<li>
<a href="#"> Quizzes </a>
</li>
<li>
<a href="#"> Categories </a>
</li>
<li>
<a href="#"> Jump </a>
</li>
</ul>
</div>
<div id="quizzes">
Quizzes! <!-- default showed -->
</div>
<div id="categories" style="display:none">
Categories! <!-- I have table here, plain text is just a example -->
</div>
<div id="jump" style="display:none">
Jump! <!-- I have table here, plain text is just a example -->
</div>
JS/JQUERY:
//SHOW AND HIDE
$('#col-navigation a').click(function(){
$('#quizzes,#categories,#jump').show().not('#' + $.trim($(this).text()).toLowerCase()).hide();
});
//STAY THE COLOR OF ACTIVE LINK
$('li').click(function() {
$(this).siblings().find('a').removeClass('focus');
$(this).find('a').addClass('focus');
});
CSS
li a {
padding: 20px;
display: block;
}
li a:hover {
background-color: white;
}
.focus {
background-color: lightblue;
color: red;
}
li a {
color: inherit;
}
以下是应该在DOM就绪时触发的JS:
$('#col-navigation a').click(function(e){
e.preventDefault();
$(".content").hide().filter( $(this).data("target") ).show();
localStorage.setItem('target', $(this).data("target"));
});
var target = localStorage.getItem('target');
!target || $('.content').hide().filter(target).show();
这是HTML;添加了data-
属性和.content
类:
<div id="col-navigation">
<ul>
<li>
<a href="#" data-target="#quizzes"> Quizzes </a>
</li>
<li>
<a href="#" data-target="#categories"> Categories </a>
</li>
<li>
<a href="#" data-target="#jump"> Jump </a>
</li>
</ul>
</div>
<div id="quizzes" class="content">
Quizzes! <!-- default showed -->
</div>
<div id="categories" style="display:none" class="content">
Categories!
</div>
<div id="jump" style="display:none" class="content">
Jump!
</div>
演示使用localStorage
记住上次选择的选项
更新
至于.focus
类的操作,一些额外的JS就足够了。无需在localStorage
中保存任何附加信息。
$('#col-navigation a').click(function(e){
e.preventDefault();
$(this).addClass('focus').parent().siblings().find('a').removeClass('focus'); //<<<--THIS
$(".content").hide().filter( $(this).data("target") ).show();
localStorage.setItem('target', $(this).data("target"));
});
var target = localStorage.getItem('target');
!target || $('.content').hide().filter(target).show();
!target || $('a[data-target="' + target + '"]').addClass('focus').parent().siblings().find('a').removeClass('focus'); //<<<-- AND THIS
更新的演示
相关文章:
- 可以't让我的if语句处理js中的html表单输入
- 如何设置html元素填充的动画
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 活动事件上的 HTML 元素
- 如何在Javascript中获取HTML页面的活动元素
- 如何在页面刷新时保持选定/活动的HTML链接颜色
- 如何使 HTML 页面保持活动状态
- HTML / JS内容的相机活动背景
- 在Joomla html标签默认代码上,如何使用外部javascript更改活动标签
- 安卓:根据上一次活动列表中的选择,修改本地静态html加载的JS
- HTML/CSS当前活动菜单不显示活动
- 在Cordova中单击html按钮时启动新的“活动”
- 编辑活动Facebook页面的HTML(特别是聊天)
- 显示链接上的html部分活动/点击-使用Rails4引导
- 如何使用javascript计算html表单的活动总数
- 如何在HTML元素处于活动状态时才启用验证?
- 更改外部HTML头活动
- 收集Crossrider中的活动选项卡HTML内容
- 在 HTML 中获取活动标签名称
- 如何知道哪个活动加载了 html 页面