加载页面后,将类添加到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');
        }
     });

我希望它有所帮助

Answer 2

下面的函数将类 active 添加到所有链接到您所在的当前页面的链接。

$(function(){
       $("a").each(function(){
               if ($(this).attr("href") == window.location.pathname){
                       $(this).addClass("active");
               }
       });
});

来源https://css-tricks.com/snippets/jquery/highlight-all-links-to-current-page/