如何在页面刷新时保持选定/活动的HTML链接颜色? [英] How to keep selected/active HTML link color on page refresh?

问题描述

编辑:

我要保持选中状态，以刷新页面上的HTML链接颜色.我尝试了其他已经解决但无法解决的问题.

I want to keep selected keep HTML link color on page refresh. I tried other problems that already been answered but didn't work on me.

例如:

当我单击HTML链接类别时，HTML链接测验会将颜色更改为红色，并保持页面刷新的颜色.

When I clicked HTML link Categories the HTML link Quizzes it will change the color to red, and keep the color on page refresh.

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:

Here's the JS which should be triggered on DOM ready:

$('#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类:

And here's the HTML; added data- attribute and .content class:

<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记住上一个选择的选项

Demo Using localStorage to remember last selected option

更新

对于.focus类的操作，可以使用一些其他的JS就足够了.无需在localStorage中保存任何其他信息.

As for manipulation of the .focus class, some additional JS will suffice. No need to save any additional info in 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

更新的演示

这篇关于如何在页面刷新时保持选定/活动的HTML链接颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！