时间戳

首页 > 解决方案 > 如何将活动类设置为菜单项（sessionStorage）

javascript - 如何将活动类设置为菜单项（sessionStorage）

问题描述

我有这样的代码：

<ul class="nav navbar-nav navbar-right">
    <li><a href="#" class="dropdown-toggle " data-toggle="dropdown" data-hover="dropdown" data-close-others="true">Some <i class="fa fa-caret-down" aria-hidden="true"></i></a>
       <ul class="dropdown-menu">
          <li><a href="">Some 1</a></li>
          <li><a href="">Some 2</a></li>
          <li><a href="">Some 3</a></li>
          <li><a href="">Some 4</a></li>
      </ul>
  </li>
  <li><a href="">News</a></li>
</ul>

和JS代码

$(document).ready(function () {

    $(".nav  li a ").click(function () {
    var id = $(this);

    $(".nav li a").removeClass("active");
    $(id).addClass("active");
    sessionStorage .setItem("mylink", $(id).text());
   });

    var mylink = sessionStorage .getItem('mylink');

    if (mylink !== null) {

       $("li:contains('" + mylink + "')").addClass("active");
     }
});

我正在尝试实现这一点，当我单击导航中的项目时会添加“活动”类。有人可以帮我吗？

标签： javascriptjqueryhtml

解决方案

设置类和 sessionStorage 值的逻辑工作正常。您遇到的问题是，当页面加载时，您将active类放在li而不是a. 因此，调用$(".nav li a").removeClass("active")什么都不做。要解决此问题，请更改此行：

$("li:contains('" + mylink + "')").addClass("active");

至

$("li a:contains('" + mylink + "')").addClass("active");

工作示例

推荐阅读