Set <a>class = “active” using Javascript

Question

I have a nav bar that I've made common throughout pages so it's easier to update, however now my class="active" on the <a> tags is of course not working. I've been trying to fiddle around with this using Javascript, so that when these are clicked, the active state adds to that link and is removed from the previous.

 $(document).ready(function() { //active state $(function() { $('.start').addClass('active'); $('#Side_Menu a').click(function() { $('#Side_Menu a').removeClass('active'); $(this).addClass('active'); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="nav nav-pills nav-stacked" id="Side_Menu"> <li><a href="dashboard.php" class="active"><i class="fa fa-th" aria-hidden="true"></i> &nbsp;Dashboard</a></li> <li><a href="blog_posts.php"><i class="fa fa-file-text" aria-hidden="true"></i> &nbsp;Blog Posts</a></li> <li><a href="addnewpost.php"><i class="fa fa-code" aria-hidden="true"></i> &nbsp;Add New Post</a></li> <li><a href="categories.php"><i class="fa fa-list" aria-hidden="true"></i> &nbsp;Categories</a></li> <li><a href="admins.php"><i class="fa fa-user" aria-hidden="true"></i> &nbsp;Manage Admins</a></li> </ul> 

I have the active state on the first <a> because this is the default load page. Not sure why this is not working. It navigates around & I'm not getting any errors, but the JS is not doing it's job.

Any help would be appreciated.

Answer 1

When you navigate to a different page, the whole thing starts again. Your JS works when you click the link, but then straight away you navigate to the other page and everything starts from scratch.

Just for fun, if you take away all the href attributes from the menu, your JS will work, but you won't navigate anywhere.

It's simplest to add the active class in your PHP templates instead of using JS. For example:

class="<?= $_SERVER['REQUEST_URI'] == 'dashboard.php' ? 'active' : '' ?>"...

Answer 2

Try this:

    $(document).ready(function() {
        $(function() {
            $('.start').addClass('active');
            $('#Side_Menu a').click(function(e) {
                e.preventDefault();
                $('#Side_Menu a').removeClass('active');
                $(this).addClass('active');
            });
        });
    });

I prevented the default, just for testing purposes. If the page is unloaded (you navigate to another page) you probably wont notice the changes on th HTML.

 $(document).ready(function() { $('.start').addClass('active'); $('#Side_Menu a').click(function(e) { e.preventDefault(); $('#Side_Menu a').removeClass('active'); $(this).addClass('active'); }); }); 

 a.active { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="nav nav-pills nav-stacked" id="Side_Menu"> <li><a href="dashboard.php" class="active"><i class="fa fa-th" aria-hidden="true"></i> &nbsp;Dashboard</a></li> <li><a href="blog_posts.php"><i class="fa fa-file-text" aria-hidden="true"></i> &nbsp;Blog Posts</a></li> <li><a href="addnewpost.php"><i class="fa fa-code" aria-hidden="true"></i> &nbsp;Add New Post</a></li> <li><a href="categories.php"><i class="fa fa-list" aria-hidden="true"></i> &nbsp;Categories</a></li> <li><a href="admins.php"><i class="fa fa-user" aria-hidden="true"></i> &nbsp;Manage Admins</a></li> </ul> 

EDIT: This code will select the current link in a very simple way using jQuery and parsing location.href :

<script>
    $(document).ready(function() {
        var url      = String(location.href),
            selected = url.substr(url.lastIndexOf('/') + 1);
        $('#Side_Menu a[href="' + selected + '"]').addClass('active');
    });
</script>

Answer 3

You are repeating the same code (document ready):

$(document).ready(function(){
    //active state  
    $(function() {
        $('.start').addClass('active');
        $('#Side_Menu a').click(function() {
        $('#Side_Menu a').removeClass('active');
        $(this).addClass('active');             
        });
    });
});

You should and try to use this:

$(document).ready(function(){
        //active state  
        $('.start').addClass('active');
        $('#Side_Menu li a').click(function() {
        $('#Side_Menu li a').removeClass('active');
        $(this).addClass('active'); 
        });            
});

And what's the "start" class for?