Лучшая альтернатива динамически выделять мою ссылку Navbar с помощью jQuery?

Question

У меня есть веб-сайт ASP.NET, на MasterPage У меня есть основное меню навигации:

<ul id="menu"> 
    <li><a href="Default.aspx"><span>Home</span></a></li> 
    <li><a href="Services.aspx"><span>Services</span></a></li>      
    <li><a href="HowItWorks.aspx"><span>How It Works</span></a></li> 
    <li><a href="ContactUs.aspx"><span>Contact Us</span></a></li> 
</ul> 

Моя цель состоит в том, чтобы добавить функцию JavaScript на MasterPage, который будет динамически добавлять «активный» класс в тег который представляет страницу, на которой пользователь включен. Например, если пользователь находится на www.mywebsite.com/default.aspx, то атрибут [class = 'active'] должен быть добавлен к первой ссылке на навигационной панели. Активный класс в основном просто выделяет ссылку, чтобы пользователь знал, на какой странице они находятся.

Вот мой код JavaScript:

<script type="text/javascript"> 
    $(document).ready(selectMenuItem); 

    function selectMenuItem() { 
     var name = getPageName(); 
     if (name) 
      $('#menu a[href="' + name + '"]').addClass("active"); 
    } 

    function getPageName() { 
     var path = window.location.href.split('?')[0]; 
     var name = path.substring(path.lastIndexOf('/') + 1, path.length); 
     return name; 
    } 
    </script> 

Вот что происходит, когда пользователь посещает любую страницу на сайте, функция selectMenuItem() выполняется. Функция вызывает вызов getPageName(), который возвращает имя файла страницы, который просматривает пользователь (например: «default.aspx»). Функция использует эту строку имен, чтобы найти, какой тег ссылается на страницу, на которой пользователь в данный момент включен, когда найден класс, который был добавлен правильно.

Этот код отлично работает, однако этот процесс чувствителен к регистру. В основном я нахожусь во власти пользователя. Если они вручную набирают «mywebsite.com/DefUlT.aspx», чем мой код будет терпеть неудачу, потому что корпус в подстроке «default.aspx» не совпадает с тегом в теге. Я мог бы решить эту проблему, сообщив функции JavaScript, чтобы строка имени была более строчной, но это будет означать, что всякий раз, когда я добавляю новый пункт меню, мне нужно быть уверенным, что я пишу атрибут href в нижнем регистре, что не является большое дело, но для меня это недостаточно элегантно. Это не проблема, если бы я был единственным, кто работал на этом сайте, но я передам работу ряду других профессионалов, и я чувствую себя глупо, говоря всем », убедитесь, что значения href являются строчными или кодовыми сломает!"

Может кто-то заинтересован в вызове, может быть, расскажите мне, как обойти это? Я очень новичок в jQuery (начал вчера вечером), поэтому я уверен, что есть элегантное решение, которое включает изменение этой строки кода:

$ ('# menu a [href = "' + name + '"] «) .addClass ("активный");

Моя проблема в том, что мне нужно, чтобы атрибут «href» был обращен к нижнему регистру перед сопоставлением с переменной имени, тогда я просто выполнил бы «name.toLowerCase()», чтобы я знал разницу в случае между атрибутом href и переменной имени не имеют значения. Есть ли эквивалентный селектор jQuery, который позволяет мне указать выражение, возможно?

Спасибо,

-Эндрю C.

Answer 1

Я не знаю способ сделать это с помощью селектора, но цикл через все меню как показано ниже, вы можете применить метод toLowerCase() как к href, так и по имени, так что вы знали, что совпадение будет работать независимо от того, что пользователь вводил в URL-адрес:

function selectMenuItem() { 
    var name = getPageName(); 
    if (name){ 
     $('#menu a').each(function(){ 
      if($(this).attr('href').toLowerCase() == name.toLowerCase()){ 
       $(this).addClass('active'); 
       return; 
      } 
     }); 
    } 
} 

Answer 2

попробовать это с .filter()

function selectMenuItem() { 
    var name = getPageName(); 
    if (name) 
     $('#menu a').filter(function(){ 
      return this.href.toUpperCase() == name.toUpperCase(); 
     }).addClass("active"); 
}