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

Question

我使用带有codeigniter的bootstrap导航栏作为后端.

现在在我的应用程序中,我想将<li>类动态更改为每个页面.

所以我知道我现在在哪个页面上.

以下是我的代码:

<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">

Answer 1

您可以使用此JavaScript来添加基于当前网址的活动类,请尝试使用它

<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>