从导航添加或删除.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"} ...

Answer 2

I have no idea what you are trying to do here but the following codes might help you?? The first code will toggle your active class if you want to do that (Which I assume is of no use because you are removing the same and adding the same again) and the second one removes the active class from your element. Before performing anything, the code will check if your element has active class

    // Toggle Class??
    $('.nav li a').click(function(event){
        event.preventDefault();
        $(this).toggleClass('active');
    });

    // Remove class??
    $('.nav li a').click(function(event){
        event.preventDefault();
        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
        }
    });

Let me know if it helps you or you meant some other things

Answer 3

I'm not sure, but I think that you need to remove the . from jQuery selector, like that:

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

Theoretically, without the . , the selector will find all <a> inside <li> inside <nav> ...

Take a look on jQuery documentation .
(Sorry for the bad english on my answer)