添加基于 URL 的活动导航类

IT技术 javascript css menu
2021-01-24 10:01:57

我正在尝试根据页面加载后所在的页面将一个active类（即class="active"）添加到相应的菜单列表项中。下面是我现在的菜单。我已经尝试了在这方面可以找到的所有代码片段，但没有任何效果。那么，有人可以简单地解释一下在何处以及如何添加 javascript 来定义此任务吗？

<ul id="nav">
    <li id="navhome"><a href="home.aspx">Home</a></li>
    <li id="navmanage"><a href="manageIS.aspx">Manage</a></li>
    <li id="navdocso"><a href="docs.aspx">Documents</a></li>
    <li id="navadmin"><a href="admin.aspx">Admin Panel</a></li>
    <li id="navpast"><a href="past.aspx">View Past</a></li>
</ul>

这是我在站点主站中放入 head 标记的 javascript 示例。我究竟做错了什么？

$(document).ready(function () {
    $(function () {
        $('li a').click(function (e) {
            e.preventDefault();
            $('a').removeClass('active');
            $(this).addClass('active');
        });
    });
});
6个回答

这不起作用的原因是因为 javascript 正在执行，然后页面正在重新加载，这使“活动”类无效。您可能想要做的是：

$(function(){
    var current = location.pathname;
    $('#nav li a').each(function(){
        var $this = $(this);
        // if the current path is like this link, make it active
        if($this.attr('href').indexOf(current) !== -1){
            $this.addClass('active');
        }
    })
})

在某些情况下这不起作用（多个类似的指向链接），但我认为这对您有用。

@RobM。如果您在 ul 中有一个 ul - 您将如何在顶级链接上设置活动类？
2021-03-16 10:01:57
@MJCoder $this.parents('.target-parent-selector').addClass('active')
2021-03-30 10:01:57
谢谢你。使用这个以及在我的链接前面添加一个“/”（例如 /home.aspx 与 home.aspx）更正了这个问题。
2021-04-02 10:01:57
@MJCoder 使用此代码，将链接标记设置为 active，如何将其设置为 li 标记中的类
2021-04-10 10:01:57
@RobM。JSFiddle有机会吗？
2021-04-12 10:01:57 

    jQuery(function($) {
     var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
     $('ul a').each(function() {
      if (this.href === path) {
       $(this).addClass('active');
      }
     });
    });
.active, a.active {
    color: red;
}
a {
    color: #337ab7;
    text-decoration: none;
}
li{
    list-style:none;
}
<h3>Add Active Navigation Class to Menu Item</h3> 

    <ul>
     <li><a href="/">Home</a></li>
     <li><a href="/about/">About</a></li>
    </ul> 

<h2><a href="http://www.sweet-web-design.com/examples/active-item/active-class.html">Live Demo</a></h2>

使用 VANILLA 纯 JavaScript

(function () {
    var current = location.pathname.split('/')[1];
    if (current === "") return;
    var menuItems = document.querySelectorAll('.menu-item a');
    for (var i = 0, len = menuItems.length; i < len; i++) {
        if (menuItems[i].getAttribute("href").indexOf(current) !== -1) {
            menuItems[i].className += "is-active";
        }
    }
})();
工作完美，除了它删除了 'a' 元素中的所有现有类以支持“is-active”。为了解决这个问题，我将代码片段中的第 7 行更改为 menuItems[i].className += " is-active";似乎已经解决了这个问题。
2021-03-25 10:01:57

ES6 版本，在您的链接是“/products”并且您有子路由的情况下正常工作，例如：“/products/new”、“/products/edit”等。

let switchNavMenuItem = (menuItems) => {

    var current = location.pathname

    $.each(menuItems, (index, item) => {

        $(item).removeClass('active')

        if ((current.includes($(item).attr('href')) && $(item).attr('href') !== "/") || ($(item).attr('href') === "/" && current === "/")){
            $(item).addClass('active')
        }
    })
}

$(document).ready(() => {   
    switchNavMenuItem($('#nav li a, #nav li link'))
})

$(function() {
    var CurrentUrl= document.URL;
    var CurrentUrlEnd = CurrentUrl.split('/').filter(Boolean).pop();

    $( ".top-menu li a" ).each(function() {
          var ThisUrl = $(this).attr('href');
            var ThisUrlEnd = ThisUrl.split('/').filter(Boolean).pop();
            if(ThisUrlEnd == CurrentUrlEnd)
            $(this).addClass('active')
        });
    });
其它你可能感兴趣的问题
上一篇你能用Javascript控制GIF动画吗？ 下一篇Meteor：在 Meteor.method 中调用异步函数并返回结果