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

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

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

    return false; // To stop redirection
});

Answer 3

因为每次点击它都会重新加载页面。并且无法在前端跟踪活动页面。它必须在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>

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

3 个答案:

以下是纯javascript答案