使用 jQuery 动态突出显示我的导航栏链接的最佳选择？

Posted 2023-03-05

【中文标题】使用 jQuery 动态突出显示我的导航栏链接的最佳选择？

【英文标题】：Best alternative to dynamically highlight my Navbar link using jQuery?

【发布时间】：2011-03-22 12:04:57

【问题描述】：

我有一个 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.

【参考方案1】：

用.filter()试试这个

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

【讨论】：

感谢这个方法，我可以看到它背后的逻辑了。但是我确实遇到了一些问题，当我第一次运行它时，每个导航栏链接最终都突出显示，我假设这是因为括号在 href.toUpperCase == name.toUpperCase 上被遗漏了，这两个语句都被评估为 null 这使得== 语句每次都评估为真。然而，这很容易解决：P 我遇到的更大问题是由于某种原因，“this.href”段返回了 href 属性中文件名的绝对路径。解决这个问题很容易，但我认为这很奇怪。

不，我在toUpperCase 中忘记了()，哈哈，我的错…… :) 好吧，我很高兴你解决了它……

【参考方案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;
            
        );
     
 

【讨论】：

谢谢，这就像一个魅力！我应该考虑一次循环遍历每个元素的逻辑。不敢相信我错过了：D

您需要属性选择器。 $("menu a[href='"+window.location+"']").addClass('active');

关键，该代码可能会失败，因为它取决于程序员在所比较的 href 属性中键入的内容。关键是必须有一种方法可以通过将 href 属性中的数据和 window.location 值强制为相同大小写（大写或小写）来最小化这种风险，以便该值在 100% 的时间内正确匹配。