单击 [codeigniter] 时将 li 设置为活动状态

Question

我正在使用 codeigniter。我的问题是，当我将li >a 设置为active 时，它并没有反映更改。我有这个代码：

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

我的程序的结构：每次点击链接时都会加载标题。

HTML：

<div class="navbar navbar-default navbar-static-top" style="padding-bottom: 0px;">
    <div class="container">
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active" style="margin-left: 20px"><a href="<?php echo site_url('Account/viewAccounts');?>">Manage Accounts</a></li>
                <li style="margin-left: 10px"><a href="<?php echo site_url('User/viewUser');?>">View Users</a></li>
                <li style="margin-left: 531px"><a href="<?php echo site_url('logout');?>"> Log out <i style="margin-left:5px" class="fa fa-sign-out"></i> </a></li>
            </ul>
        </div>
    </div>
</div>
</div>

样品控制器：

public function viewAccounts(){

        $this->load->model('user_model'); 
        $data['users']=$this->user_model->getAllAccounts(); 
         $this->load->view('include/header');
         $this->load->view('admin/viewAccounts',$data); 
         $this->load->view('include/footer');

}

Answer 1

试试这个：

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

或

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

Answer 2

因为每次您点击它们都会重新加载页面。并且无法在前端跟踪活动页面。它必须在 php 代码中完成。 按照https://ellislab.com/codeigniter/user-guide/libraries/uri.html 获取正确的段并使用<?=($this->uri->segment(1)==='Account/viewAccounts')?'active':''?> 这将active 类名添加到正确的列表中。

<ul class="nav navbar-nav">
   <li class="<?=($this->uri->segment(1)==='Account/viewAccounts')?'active':''?>" style="margin-left: 20px"><a href="<?php echo site_url('Account/viewAccounts');?>">Manage Accounts</a></li>
   <li class="<?=($this->uri->segment(1)==='User/viewUser')?'active':''?>" style="margin-left: 10px"><a href="<?php echo site_url('User/viewUser');?>">View Users</a></li>
   <li class="<?=($this->uri->segment(1)==='logout')?'active':''?>" style="margin-left: 531px"><a href="<?php echo site_url('logout');?>"> Log out <i style="margin-left:5px" class="fa fa-sign-out"></i> </a></li>
</ul>

更多可以参考CodeIgniter: How to 'highlight' the link of the page the user is currently on?

以下是纯 javascript 答案

.removeClass() 方法将 类名 或 函数 作为参数并错过了它

参考：https://api.jquery.com/removeclass/

这是一个工作示例

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

.active a {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar navbar-default navbar-static-top" style="padding-bottom: 0px;">
  <div class="container">

    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Manage Accounts</a>
        </li>
        <li><a href="#">View Users</a>
        </li>
        <li><a href="#"> Log out <i style="margin-left:5px" class="fa fa-sign-out"></i> </a>
        </li>
      </ul>



    </div>
  </div>
</div>

Answer 3

您应该将active 作为参数添加到removeClass

$('.nav li').on('click', 'a', function() {
    $('.nav li').removeClass('active');
    //                        ^^^^^^
    $(this).closest('li').addClass('active');

    return false; // To stop redirection
});