在导航中添加或删除.active类

Question

I have a question I tried to remove active class from a element with jquery,I searched but did not find the problem; My html:

<nav class="navbar-default navbar-side" role="navigation">
    <div class="sidebar-collapse" id="menu">
        <ul class="nav" id="main-menu">
            <li class="text-center">
                <img src="http://cadastru.md/assets/img/find_user.png" class="user-image img-responsive"/>
            </li>
            <li>
                <a class="active"  href="<?php echo base_url(); ?>administration/show/index"><i class="fa fa-dashboard fa-3x"></i>Home</a>
            </li>
            <li>
                <a href="<?php echo base_url();?>administration/add_user"><i class="fa fa-bar-chart-o fa-3x"></i>Add user</a>
            </li>
        </ul>
    </div>
</nav>

My jquery:

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

How to remove active class from a element?

Answer 1

The problem is that you are going to a different page which means the javascript wouldn't matter, because the page changes as the javascript is changing active.

You need to have your nav look something like this

<nav class="navbar-default navbar-side" role="navigation">
    <div class="sidebar-collapse" id="menu">
        <ul class="nav" id="main-menu">
            <li class="text-center">
                <img src="http://cadastru.md/assets/img/find_user.png" class="user-image img-responsive"/>
            </li>
            <li>
                <a class="<?php if($_SERVER['REQUEST_URI']==base_url()){echo 'active';}?>"  href="<?php echo base_url(); ?>administration/show/index"><i class="fa fa-dashboard fa-3x"></i>Home</a>
            </li>
            <li>
                <a class="<?php if($_SERVER['REQUEST_URI']==base_url() . "administration/add_user"){echo 'active';}?>" href="<?php echo base_url();?>administration/add_user"><i class="fa fa-bar-chart-o fa-3x"></i>Add user</a>
            </li>
        </ul>
    </div>
</nav>

that probably won't be perfect, but hopefully you understand the concept.

Note: This wouldn't require Javascript anymore.

Additionally, you could add a variable called $currentPage and store a string name for the page. Then you could just check if ($currentPage === "Home") {echo "active"} ...