Как динамически установить активный класс в bootstrap navbar?

Question

Я использую bootstrap nav bar с codeigniter в качестве backend.

В настоящее время в моей заявке я хочу изменить класс < 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, чтобы добавить активный класс, основанный на текущем 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> 

Answer 2

Вы можете достичь его с помощью JQuery или JavaScript.

JQuery Пример:

$('.nav li').click(function(){ 
    $('.nav li').removeClass('active'); 
    $(this).addClass('active'); 
}); 

Answer 3

Разве вы не можете просто использовать это заменив <a> теги. Это будет соответствовать текущей строке uri, с атрибутом ссылок href. Если он совпадает, он добавляет в ссылку класс active. Вы можете стиль .active с помощью вы

<a href="<?php echo site_url('admin/company'); ?>" class="<?php if($this->uri->uri_string() == 'admin/company') { echo 'active'; } ?>">Company</a> 

Таким образом, весь код будет.

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

Answer 4

Ваши страницы должны знать, какое меню должно быть установлено в качестве активного.

Попробуйте добавить идентификатор к вашему <li> и добавить код javascript на свои страницы, чтобы установить активное меню на основе идентификатора. Пример:

<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 = "# меню компания";

• страница пользователя

  menuid = "# меню пользователя";