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

Question

我正在使用Bootstrap导航栏和Codeigniter作为后端。现在，在我的应用程序中，我想动态地将<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">

- Rajan

---

嗨，你需要查看在CodeIgnitor中如何将class="active"设置为导航菜单的问题。 - Shailesh Singh

@ShaileshSingh 我想把当前页面设置为活动页面！！我有一个主要布局，其中定义了网站样式。 - Rajan

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> 

- Kapil

---

运行得很好，谢谢。 - Abbas

这里似乎只需要 $('ul.nav a[href="'+ url +'"]').parent().addClass('active'); 语句下面的部分。这段代码在做什么？ - niico

Answer 2

你可以通过使用jQuery或JavaScript来实现它。

jQuery示例：

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

- Raghavendra S

---

这个部分是有效的，当我点击它时，它会将活动链接更改为该链接，但当我被重定向到该页面时，它又变成了仪表板以激活状态。 - Rajan

Answer 3

你不能只使用这个替换你的标签。这将匹配当前URI字符串，与链接的href属性相匹配。如果匹配，则添加一个活动类到链接。你可以使用你的样式来设计.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">

- Nikhil Nanjappa

---

不明白这是怎么回事？ - Rajan

Answer 4

你的页面应该知道哪个菜单应该被设置为活动状态。

尝试给你的 <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";

- Setrákus Ra

Answer 5

被接受的答案中的jQuery并不知道访问者是从http://example.com还是http://example.com/index.php进入，这将导致“主页”菜单项无法激活。这是我的修复方法。

以下是我的菜单代码段：

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

- Cirshiss