如何使用 JavaScript 将活动导航类动态添加到我的网站菜单？

向菜单添加动态活动导航类

导航网页时，通常会突出显示与当前页面对应的活动菜单项。这通过为站点层次结构中的当前位置提供视觉提示来改善用户体验。

为了实现此功能，我们将利用 JavaScript 来识别当前 URL 并向相应的菜单项添加“活动”类.

如何使用 JavaScript 添加活动导航类

让我们研究一下使用 jQuery 强大功能的解决方案库：

$(function () {
    var current = location.pathname;
    $('#nav li a').each(function () {
        var $this = $(this);
        if ($this.attr('href').indexOf(current) !== -1) {
            $this.addClass('active');
        }
    });
});

说明：

• 当文档准备好时，脚本初始化。
• location.pathname 属性检索当前页面的路径。
• 它迭代每个菜单项的锚标记($('#nav li a'))。
• 对于每个锚标记，它使用 indexOf() 函数检查其 href 属性是否包含当前路径。
• 如果找到匹配时，相应的锚标记被分配为“active”类。

重要注意：

如果菜单包含指向同一页面的多个链接，此方法可能无法准确确定活动项目。在这种情况下，可能需要额外的逻辑来处理这些情况。

以上是如何使用 JavaScript 将活动导航类动态添加到我的网站菜单？的详细内容。更多信息请关注PHP中文网其他相关文章！