javascript - 根据 URL 添加事件菜单或导航类

标签 javascript html class menu

我已将 active 类添加到我的菜单项中。然而,我当前的实现是将类添加到所有列表菜单项,而不是当前页面

如果我当前的代码有问题,请告诉我,以及我可以采取哪些措施来实现预期的结果。

<ul id="menu_items">
 <li class="has-sub"><a href="/collections">STORE</a></li>
 <li><a href="/collections">RESEARCH</a></li>
 <li><a href="/collections">INFO</a></li>
</ul>

$(function(){
        var current = location.pathname;
        $('#menu_items 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');
            }
        })
    })  

.active {text-decoration:underline;}

最佳答案

好的,试试这个方法,希望能成功

<ul id="menu_items">
<li><a href="#index">Index</a></li>
 <li class="has-sub"><a href="#store">STORE</a></li>
 <li><a href="#research">RESEARCH</a></li>
 <li><a href="#info">INFO</a></li>
</ul>
</html>

<Script>
 $("#menu_items li").bind("click", function(e){

 $("li").click(function() {
        $(this).siblings().find("a").removeClass("active");
        $(this).find("a").addClass("active")
    })
 })

</Script>

关于javascript - 根据 URL 添加事件菜单或导航类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61194286/

相关文章:

javascript - 谁拥有最多的钱 - Codewars 挑战 - JavaScript

html - css font-face 不适用于@fonsquirrel

javascript - 将页面拖到第二台显示器时图标消失

html - Bootstrap 3 下拉子菜单不起作用

javascript - Angular 保持 Controller 之间的选择并支持路由

html - 列表和 div 以及如何使它们在彼此旁边/下方对齐

jquery - 如何在按下按钮时激活 Bootstrap 背景

Python - 继承已初始化的类而不调用 super 构造函数

javascript - 如何选择 dom(使用 jQuery)上具有某些以 "created"结尾的数据属性的元素?

javascript - Nodejs crypto.getHashes() 返回一个空数组