当点击[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

try this:

$('.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:如何'高亮'用户当前所在页面的链接?

下面是纯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
});