使用 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 （“积极的”）;

我的问题是，在与 name 变量进行比较之前，我需要将“href”属性转换为小写，然后我只需执行“name.toLowerCase()”，以便我知道 href 属性之间的大小写差异和名称变量无关。是否有一个等效的 jQuery 选择器允许我指定一个表达式？

谢谢，

-安德鲁·C.

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 和名称，所以无论用户在 URL 中输入什么内容，您都会知道匹配会起作用：

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