Question

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

现在在我的应用程序中，我想更改＆lt;李＆GT;要为每个页面动态激活的类。

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

以下是我的代码：

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

Answer 2

你不能只用这个替换你的IllegalArgumentException标签。这将匹配当前的uri字符串，以及链接<a>属性。如果匹配，则向链接添加href类。您可以使用

设置active的样式

.active

所以整个代码都是。

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

Answer 3

您的页面应该知道应将哪个菜单设置为有效。

尝试在<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”;

Answer 4

您可以使用jQuery或JavaScript来实现它。

jQuery示例：

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

Answer 5

如果访问者来自jQuery或http://example.com，则接受的答案中的http://example.com/index.php不知道区别，因此不会激活“主页”菜单项。这是我的解决办法。

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>

这是我添加到数据库控制器类中的功能，用于了解访问者使用的协议：

public static function adr_protocol()
{
    $str = 'http://';
    if(isset($_SERVER['HTTPS']) && 'on' === $_SERVER['HTTPS']) $str = 'https://';
    return $str;
}

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');

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

5 个答案: