javascript - 如何将事件类设置为菜单项(sessionStorage)

Question

我有这样的代码:

<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");
     }
});

我正在努力实现这一目标，当我单击导航中的项目时，会添加“事件”类。有人可以帮我解决这个问题吗？

Answer 1

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

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

至

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

Working example