It's a little difficult to tell exactly what you want to do, but here's some quick and dirty (and untested) code:

/// when we click on an `a` tag inside the `#main-menu-list`...

$('#main-menu-list').on('click', 'a', function(e) {

    // stop the link from firing

    e.preventDefault();

    e.stopPropagation();

    // change the list item's background to green

    $(this).closest('li').addClass('myClassName').css('background-color', 'green');



    // do anything else, e.g. load in pages via ajax...

});

You could use CSS to apply the green background color, instead of jQuery:

.myClassName { background-color: green; }

This will stop the page from navigating, and I don't know if that's your intention. If you want to check the currently-loaded page against the menu to find the current item, you could do this (on page load) instead:

var currentPage = window.location.pathname;



$('#main-menu-list').find('a[href^=' + currentPage + ']').closest('li').addClass('active');

EDIT:

Your amended Javascript code can be simplified to the following:

$('#main-menu li').on('click', 'a', function (e) {

    e.preventDefault();

    e.stopPropagation();

    // only do the following if the clicked link isn't already active

    if(!$(this).closest('li').hasClass('active')) {

        $(this).closest('ul').find('.active').removeClass('active');

        $(this).closest('li').addClass('active');



        // load in your content via ajax, etc.

    }

});

JSFiddle example