如何动态设置自举导航栏中的活动类？ [英] how to dynamically set the active class in bootstrap navbar?

问题描述

现在在我的应用程序中，我想更改< p> li> class为每个页面动态激活。

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

以下是我的代码：

 < ul class =nav navbar-nav> 
< li class =active>< a href =<？php echo site_url（'admin / dashboard'）;？>>仪表板< / a>< / li> 
< li>< a href =<？php echo site_url（'admin / company'）;？>>公司< / a>< / li> 
< li>< a href =<？php echo site_url（'admin / user'）;？>>用户管理< / a>< / li> 
< li>< a href =<？php echo site_url（'admin / key'）;？>>密钥管理< / a>< / li> 
< li>< a href =<？php echo site_url（'admin / activation'）;？>>已激活的设备< / a>< / li> 
 
< / ul> 
< ul class =nav navbar-nav navbar-right> 
  

解决方案

您可以使用此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> 
  

I am using bootstrap nav bar with codeigniter as backend.

Now In my application i want to change the < li> class to active dynamically for each page.

So i can known i am on which page currently.

Below is my code:

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

解决方案

You can use this javascript to add active class based on current url please try it

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

这篇关于如何动态设置自举导航栏中的活动类？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！