将类添加到Menu Jquery

Addclass to Menu Jquery

本文关键字：Menu Jquery 添加      更新时间：2023-09-26

我正在尝试将一个类动态添加到我网站上的菜单中，该菜单是按如下方式构建的。

<nav>
    <ul id="" class="mini-menu">
        <li><a href="home">Home</a></li>
        <li><a href="over-jellyfish">Over Jellyfish</a></li>
        <li><a href="blog">Blog</a></li>
        <li class="contact"><a href="contact">Contact</a></li>
    </ul>
    <ul class="hoofd-menu">
        <li class="websites"><a id="dekstop_menu" href="websites"><i class="fa fa-desktop text-center"></i>Websites</a></li>
        <li class="support"><a id="support_menu" href="support"><i class="fa fa-comment-o text-center"></i>Support</a></li>
    </ul>
</nav>

使用Jquery，我尝试通过执行以下步骤将类添加到迷你菜单中。

jQuery(function() {
    var str = window.location.pathname;
    var page = str.split("/");
    p=page[2];
    var active = p=page[2];
    console.log(active);  
    jQuery('.mini-menu a').each(function() {
        if (jQuery(this).attr('href')  ===  active) {
            jQuery(this).addClass('active');
        }
    });
});

然而，我似乎错过了一些东西，因为在html中没有显示向链接添加类的内容。我是否错过了链接不是类迷你导航的直接子项的事实？如果是，我该如何解决？

你能试试这个吗：

jQuery(function() {
    var str = window.location.pathname;
    var page = str.split("/");
    p=page[2];
    var active = p=page[2];
    console.log(active);  
    jQuery('.mini-menu a').each(function() {
        (function (self) {
        if (jQuery(self).attr('href')  ===  active) {
            jQuery(self).addClass('active');
        }
        })(this);
    });
});
相关文章：