如何在引导导航栏中动态设置活动类？

Question

我正在使用带有 codeigniter 作为后端的引导导航栏。

现在，在我的应用程序中，我想将

类更改为对每个页面动态激活。

所以我可以知道我目前在哪个页面上。

下面是我的代码：

 <ul class="nav navbar-nav">
      <li class="active"><a href="<?php echo site_url('admin/dashboard'); ?>">Dashboard</a></li>
        <li><a href="<?php echo site_url('admin/company');?>">Company</a></li>
        <li><a href="<?php echo site_url('admin/user');?>">Users Management</a></li>
        <li><a href="<?php echo site_url('admin/key');?>">Key Management</a></li>
        <li><a href="<?php echo site_url('admin/activation');?>">Activated Devices</a></li>

  </ul>
 <ul class="nav navbar-nav navbar-right">

原文由 Rajan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用此 javascript 添加基于当前 url 的活动类，请尝试

<script type="text/javascript">
    $(document).ready(function () {
        var url = window.location;
        $('ul.nav a[href="'+ url +'"]').parent().addClass('active');
        $('ul.nav a').filter(function() {
             return this.href == url;
        }).parent().addClass('active');
    });
</script>

原文由 Kapil 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

你的页面应该知道哪个菜单应该被设置为活动的。

尝试向您的 <li> 添加一个 id 并向您的页面添加一个 javascript 代码以根据该 ID 设置活动菜单。例子：

 <ul class="nav navbar-nav">
      <li id="menu-dashboard" class="active"><a href="<?php echo site_url('admin/dashboard'); ?>">Dashboard</a></li>
        <li id="menu-company"><a href="<?php echo site_url('admin/company');?>">Company</a></li>
        <li id="menu-user"><a href="<?php echo site_url('admin/user');?>">Users Management</a></li>
        <li id="menu-key-management"><a href="<?php echo site_url('admin/key');?>">Key Management</a></li>
        <li id="menu-activation"><a href="<?php echo site_url('admin/activation');?>">Activated Devices</a></li>
  </ul>

<script>
var menuid = "menu-dashboard";
$(function() {
    $('.nav li').removeClass('active');
    $(menuid).addClass("active");
});
</script>

页面：将以下 javascript 行添加到您的页面

• 公司页面

menuid = “#menu-company”;

• 用户页面

menuid = “#menu-user”;

原文由 Setrákus Ra 发布，翻译遵循 CC BY-SA 3.0 许可协议