Javascript 如何在页面刷新时保持选定/活动HTML链接的颜色？

编辑：

我想保持选中状态保持页面刷新时的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>

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；添加了

数据-

属性和

。内容

类：

<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>

---

将“开放性”存储在

sessionStorage

或

localStorage

中，然后在页面加载时重新构建。最简单的方法是使用

session

@Amadan谢谢，我会尝试一下。这能解决同样的问题吗@是的，我编辑了我的问题。我的第一个问题解决了。只是编辑了问题。我还有其他问题。我希望您能提供帮助。我有一个小问题，默认显示的每次刷新都会在显示所选分区之前显示一点。我正在使用href链接进行表格分页。注：保持显示所选div没有问题，因为这是当前的默认行为。您可以将其更改为：在页面加载之前隐藏所有内容。我需要显示默认行为。谢谢你，先生。

<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>

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