twitter-bootstrap 如何在引导程序导航栏中动态设置活动类？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35427641/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to dynamically set the active class in bootstrap navbar?
提问by Rajan
I am using bootstrap nav bar with codeigniter as backend.
我正在使用带有 codeigniter 的 bootstrap 导航栏作为后端。
Now In my application i want to change the < li> class to active dynamically for each page.
现在，在我的应用程序中，我想将 < li> 类更改为对每个页面动态激活。
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">
回答by Kapil
You can use this javascript to add active class based on current url please try it
您可以使用此 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>
回答by Raghavendra S
You can achieve it by using jQuery or JavaScript.
您可以使用 jQuery 或 JavaScript 来实现它。
jQuery example:
jQuery 示例：
$('.nav li').click(function(){
$('.nav li').removeClass('active');
$(this).addClass('active');
});
回答by Nikhil Nanjappa
Can't you just use this replacing your <a>tags. This will match the current uri string, with the links hrefattribute. If it matches, it add's an activeclass to the link. You can style the .activeusing you
你不能用这个代替你的<a>标签。这将匹配当前 uri 字符串和 linkshref属性。如果匹配，它将active向链接添加一个类。你可以.active使用你的风格
<a href="<?php echo site_url('admin/company'); ?>" class="<?php if($this->uri->uri_string() == 'admin/company') { echo 'active'; } ?>">Company</a>
So the entire code will be.
所以整个代码将是。
<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">
回答by Setrákus Ra
Your pages should know which menu should be set as active.
您的页面应该知道应该将哪个菜单设置为活动菜单。
Try adding an id to your <li>and add a javascript code to your pages to set the active menu based on the ID.
Example:
尝试向<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>
Pages: Add the following javascript lines to your pages
页面：将以下 javascript 行添加到您的页面
Company page
menuid = "#menu-company";
User page
menuid = "#menu-user";
公司页面
menuid = "#menu-company";
用户页面
menuid = "#menu-user";
回答by Cirshiss
The jQueryin the accepted answer do not know the difference if the visitor is coming from http://example.comor http://example.com/index.phpand would not activate the "home" menu-item. This is my fix for that.
该jQuery在接受的答案不知道其中的差别，如果游客是来自http://example.com或http://example.com/index.php并不会激活“家”的菜单项。这是我的解决办法。
HTML This is a snippet from my menu:
HTML 这是我菜单中的一个片段：
<div class='navbar'>
<a href='index.php'><div class='nav-icon icon-home'></div>Hem</a>
<a href='calender.php'><div class='nav-icon icon-calender'></div>Kalender</a>
<a href='exchange.php#utbyte'><div class='nav-icon icon-byte'></div>Byten</a>
</div>
This is a function I've added to my database controller class to find out what protocol the visitor use:
这是我添加到我的数据库控制器类中的一个函数，用于找出访问者使用的协议：
public static function adr_protocol()
{
$str = 'http://';
if(isset($_SERVER['HTTPS']) && 'on' === $_SERVER['HTTPS']) $str = 'https://';
return $str;
}
jQuery:
jQuery：
;var ix = '<?php echo DBController::adr_protocol()."{$_SERVER['HTTP_HOST']}/"; ?>';
var url = (window.location==ix)?window.location+'index.php':window.location;
$('div.navbar a[href="'+ url +'"]').parent().addClass('active');
$('div.navbar a').filter(function() {
return this.href == url;
}).addClass('active');
