AdminLTE 侧边栏活动菜单不会动态更改

php

1个回答

写回答

tiutiu888

2025-07-01 09:20

+ 关注

Java
Java

使用AdminLTE 侧边栏活动菜单不会动态更改

AdminLTE是一个流行的开源管理面板模板，它提供了一个美观和功能丰富的用户界面，帮助开发者快速构建管理面板。然而，AdminLTE的侧边栏活动菜单在默认情况下是静态的，不会根据用户的操作动态更改。这可能会给用户带来困惑，因为他们不能直观地了解当前的活动菜单项。

然而，我们可以通过一些简单的自定义来实现动态更改AdminLTE侧边栏活动菜单的效果。在本文中，我们将展示如何使用jQuery和JavaScript来实现这个功能。

案例代码：

首先，我们需要在HTML文件中引入AdminLTE的依赖文件和自定义的JavaScript文件。我们可以在AdminLTE的官方网站上下载这些文件，并将它们放置在我们的项目目录中。

html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=path/to/adminlte.CSS">
  <script src="path/to/jquery.JS"></script>
  <script src="path/to/adminlte.JS"></script>
  <script src="path/to/custom.JS"></script>
</head>
<body>
  <!-- AdminLTE的侧边栏菜单 -->
  <ul class="sidebar-menu">
    <li class="active">
      
        <i class="fa fa-dashboard"></i> <span>仪表盘</span>
      
    </li>
    <li>
      
        <i class="fa fa-users"></i> <span>用户管理</span>
      
    </li>
    <li>
      
        <i class="fa fa-cogs"></i> <span>设置</span>
      
    </li>
  </ul>
</body>
</html>

在上面的代码中，我们引入了AdminLTE的CSS文件和JavaScript文件，以及一个自定义的JavaScript文件custom.JS。我们将在custom.JS中编写我们的自定义代码。

动态更改活动菜单

要实现动态更改AdminLTE侧边栏活动菜单的效果，我们需要使用jQuery选择器来找到当前活动的菜单项，并添加一个特定的CSS类名。我们可以使用jQuery的$(selector).addClass(className)方法来添加CSS类名。

Javascript
$(document).ready(function(){
  // 获取当前URL的路径
  var path = window.location.pathname;
  
  // 在URL路径中查找对应的菜单项
  $('.sidebar-menu a').each(function(){
    var href = $(this).attr('href');
    if(path.endsWith(href)){
      // 添加CSS类名 "active" 到当前菜单项
      $(this).parents('li').addClass('active');
    }
  });
});

在上面的代码中，我们在页面加载完成后，使用jQuery选择器$('.sidebar-menu a')找到所有的侧边栏菜单项。然后，我们使用jQuery的each()方法遍历每个菜单项，并获取它们的href属性。我们将当前URL的路径与菜单项的href属性进行比较，如果它们匹配，我们就将active类名添加到菜单项的父元素li上。

通过这段代码，我们实现了动态更改AdminLTE侧边栏活动菜单的效果。当用户点击菜单或导航到不同的页面时，活动菜单项将自动更新。

在本文中，我们展示了如何通过简单的自定义代码来实现AdminLTE侧边栏活动菜单的动态更改。我们使用了jQuery和JavaScript来实现这个功能，并提供了一个案例代码供参考。通过这种方式，用户可以更直观地了解当前的活动菜单项，提高用户体验。

举报有用（4）分享收藏

AdminLTE 侧边栏活动菜单不会动态更改

1个回答

tiutiu888

热门话题

相关问题