как добавить текущий класс в меню текущей страницы

Question

Я использую меню лампы лавы jquery. Я хочу добавить текущий класс для тега li, а не тега это мое меню

<div>
 <ul class="lavaLamp">
   <li><a href="index.php">Home</a></li>
   <li><a href="about.php">About</a></li>
   <li><a href="contact.php?page=contact">Contact</a></li>      
  </ul>
</div>

Я пробовал это.

$(function(){ 
  var url = window.location.pathname,  
  urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");         
  $('.lavaLamp li a').each(function(){  
  if(urlRegExp.test(this.href.replace(/\/$/,''))){ 
    $(this).addClass('current'); 
    } 
  });
}); 

Я перепробовал все найденные в сети, но у меня ничего не работает. Я не знаю, почему все коды не работают. У меня есть дополнительная подпапка, мой URL выглядит так:
http://example.com/mysite/index.php
http://example.com/mysite/about.php

Answer 1

Ваше регулярное выражение, похоже, не работает.В любом случае, вот решение:

$(function(){
 var url = window.location.pathname;  
    var activePage = url.substring(url.lastIndexOf('/')+1);
 $('.lavaLamp li a').each(function(){  
    var currentPage = this.href.substring(this.href.lastIndexOf('/')+1);

    if (activePage == currentPage) {
    $(this).parent().addClass('current'); 
 } 
});
})

Обратите внимание, что я использую .parent () , чтобы получить li элемент, так как вы написали, что хотите добавить .current к li , а не a .

Answer 2

Проблема здесь в вашей подпапке.В случае http://example.com/mysite/index.php window.location.pathname должен возвращать /mysite/index.php.Затем вы говорите, что href привязки (например, index.php) должен соответствовать этому, что явно не соответствует.Вы хотите выработать более надежную проверку, является ли она той же страницей.Я бы посоветовал на самом деле просто сделать так, чтобы сервер определил это, поскольку, когда он работает, он будет четко знать, на какой странице он находится.Вы можете сделать это просто так, как предлагали другие, если у сайта есть страницы только в одной этой папке, но если у вас есть страницы во вложенных папках, это может привести к еще большему замешательству ...

Дополнительно, чтобы установить класс на li тогда, когда у вас есть свой a, вам просто нужно сделать что-то вроде:

$(this).parent().addClass('current');

Answer 3

$('.lavaLamp li:has(a[href="'+location.href.split("/").reverse()[0]+'"])').addClass('current'); 

будет ли это работать?