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

Question

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

<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, которая будет динамически добавлять «активный» класс в тег, представляющий страницу, на которой находится пользователь. Например, если пользователь находится на сайте 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 ("active");

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

Спасибо

- Андрей С.

Answer 1

попробуйте это с .filter()

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

Answer 2

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

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