javascript - 加载页面后向 li 添加类

Question

我有一个导航栏，其中包含通过 foreach 循环从数据库加载的链接，导航栏是静态的，因此只有内容在变化。我想在页面加载为事件时向链接添加“事件”类。

我曾尝试在单击 li 元素时简单地添加类，但在重新加载页面时该类消失了。

这是我的 HTML(它是由 PHP 的 foreach 循环呈现的，所以它看起来不像硬编码)

<div class="sidebar-menu">
  <ul class="sidebar-nav">
    <li class="icon_links">
      <a href="/home" class="links">
        <div class="icon">
          <i class="fa fa-tasks" aria-hidden="true"></i>
        </div>
        <div class="title">Dashboard</div>
      </a>
    </li>
    <li class="icon_links">
      <a href="/messaging" class="links">
        <div class="icon">
          <i class="fa fa-comments" aria-hidden="true"></i>
        </div>
        <div class="title">Messaging</div>
      </a>
    </li>
  </ul>
</div>

JavaScript

$(document).ready(function() {
  var selector = '.sidebar-nav li';
  $(selector).on('click', function() {
    $(selector).removeClass('active');
    $(this).addClass('active');
  });
});

Answer 1

你需要做这样的事情:

    var selector = '.sidebar-nav li';
    var url = window.location.href;
    var target = url.split('/');
     $(selector).each(function(){
        if($(this).find('a').attr('href')===('/'+target[target.length-1])){
          $(selector).removeClass('active');
          $(this).removeClass('active').addClass('active');
        }
     });

希望对您有所帮助