Javascript 将活动类添加到菜单

我有一个侧菜单，我想在加载页面时显示活动类

显而易见的答案是在每个页面中使用jquery，但它会重复大量代码，而且很无聊

所以我在app.js中使用了这个：

//Active side-menu
$('.nav-item').click(function () {
   $(this).addClass('active');
});

但这不起作用，因为它将处于活动状态，当它加载页面时，该类将在加载html后被删除

我能做什么

<ul class="nav">
    <li class="nav-item">
        <a class="nav-link" href="general-setup" onclick="gitLabFetch()" id="createEnviromentTab">
            <img src="../resources/img/icons/create-icon.png" alt="" class="menuIcon">
            <span class="menu-title">Create Environment</span>
        </a>
    </li>
    //A lot of li elements
<ul>

//很多李元素

我认为在页面加载时，您应该获取url，尝试使用javascript在菜单上找到它，然后将活动类添加到导航项中，如下所示：

$(document).ready(function() {
    var url = window.location.pathname + window.location.search;
    $('ul.nav a.nav-link[href="' + url + '"]').parent().addClass('active');    
});

举个小例子，您可能需要调整url部分：

$（文档）.ready（函数（）{
var url='general setup'；//window.location.pathname+window.location.search；
$（'ul.nav a.nav-link[href=“”+url+“]”]）.parent（）.addClass（'active'）；
});
.active{
背景：红色；
}






//很多李元素
我认为在页面加载时，您应该获取url，尝试使用javascript在菜单上找到它，然后将活动类添加到导航项中，如下所示：

$(document).ready(function() {
    var url = window.location.pathname + window.location.search;
    $('ul.nav a.nav-link[href="' + url + '"]').parent().addClass('active');    
});

举个小例子，您可能需要调整url部分：


$（文档）.ready（函数（）{
var url='general setup'；//window.location.pathname+window.location.search；
$（'ul.nav a.nav-link[href=“”+url+“]”]）.parent（）.addClass（'active'）；
});
.active{
背景：红色；
}






//很多李元素
好的，经过进一步思考，我想出了一个解决方案。
我会采取的一种方法是添加一个
data
属性来锚定，这使您可以自由定义列表项链接到的路由，并根据路由设置相应的样式


（（）=>{
$（‘li’）
.filter（（i，li）=>$（li）.data（'route'）==window.location.pathname）
.addClass（“活动”）
})（）
主页
朋友
profile
blog
好的，经过进一步思考，我想出了一个解决方案。
我会采取的一种方法是添加一个
data
属性来锚定，这使您可以自由定义列表项链接到的路由，并根据路由设置相应的样式


（（）=>{
$（‘li’）
.filter（（i，li）=>$（li）.data（'route'）==window.location.pathname）
.addClass（“活动”）
})（）
主页
朋友
profile
blog
活动类是由用户单击li确定的。是否希望此活动类在会话之后保持不变？IMO，应将该类添加到服务器side@zer00ne我只想将活动类放在用户所在的当前选项卡中。我只有一个带有侧菜单的jsp文件，我的加载方式如下：
活动类由用户单击一个li来确定您是否希望该活动类在会话之后保持不变？IMO，应该将该类添加到服务器side@zer00ne我只想将活动类放在用户所在的当前选项卡中。我只有一个带有侧菜单的jsp文件，加载方式如下：
它没有添加活动类。url是正确的，
console.log（url）的输出是什么？一般设置。没错。我把它放在页脚上，文档准备就绪，所以它应该可以工作。
console.log（$（'ul.nav a.nav-link[href=“”+url+“]”）的输出是什么？
？你能发布一个包含所有菜单的JSFIDLE吗？ul和child li元素？它没有添加活动类。url是正确的，
console.log（url）的输出是什么？一般设置。没错。我把它放在页脚上，文档准备就绪，所以它应该可以工作。
console.log（$（'ul.nav a.nav-link[href=“”+url+“]”）的输出是什么？
？你能发布一个包含所有菜单的JSFIDLE吗？ul和child-li元素？