使用 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");

我的问题是，在对 name 变量进行比较之前，我需要将“href”属性转换为小写，然后我只需执行“name.toLowerCase()”，以便我知道大小写之间的差异href 属性和 name 变量无关。是否有一个等效的 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 和 name，所以你会知道无论用户在 URL 中输入什么，匹配都会起作用：

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