Applying different CSS class on click using jQuery

Does this give you the expected behavior?

  $('a').each(function(e){        if(!$(this).data('filter') && !$(this).parent().parent().parent().hasClass('pagination'))        $(this).hoverFadeColor();        e.preventDefault();   })

Adding e.preventDefault() should solve the issue.

UPDATED 12/10/2012:

Try updating your click function to the following:

$('ul#menu-main-menu li div ul.sub-menu:first li.menu-item p a').on("click",function(){    var linkClicked = $(this);    $("#menu-main-menu li").each(function(){        $(this).removeClass("selected").css({'color' : '#888'}).addClass('menu-item');        $(this).first("div").show();    });    linkClicked.css({'color' : '#222'})});

If I understand you correctly this should help you, if you're able to insert any type of script that is. :)

$('ul#menu-main-menu li div ul.sub-menu li.menu-item p a').click(function(event){    $('ul#menu-main-menu > li').removeClass('selected');    alert($('ul#menu-main-menu > li').attr('class'));    $('ul#menu-main-menu li').addClass('menu-item');    alert($('ul#menu-main-menu > li').attr('class'));    event.preventDefault();});

I hope this is what you're after! :)

You can try it out here on TInker.io

I put in two alerts so you can see that the class actually gets removed and then a diffrent class gets added. You of course have to specify how the new class looks in the css.

I did small change in your css and added some jquery functions into your html page as follows :

Css change :

Find line number 67 in your custom.css and replace the coding as follows,

/*Turns link background white and removes border on the left at hover*/.Light #menu ul.main-menu > li:hover > p > a {   background:#FFF;   border-left:6px solid #F0F0F0;}

This above one replace into

/*Turns link background white and removes border on the left at hover*/.Light #menu ul.main-menu > li:hover > p > a {   background:#FFF;   /*border-left:6px solid #F0F0F0;*/}

Adding Jquery function in some where of your theme header or footer file like as follows,

<script type="text/javascript">$(document).ready(function() {$("#menu-main-menu li:first").addClass("selected");$("#menu-main-menu li p a").css("border-left","none");$("#menu-main-menu li p a").hover(function(){$(this).css("border-left","6px solid #F0F0F0");});$("#menu-main-menu li").click(function() {  $(this).addClass("selected");});});</script>

This above changes are working for me.,To see it in action : http://jsbin.com/ehagal/1

I think this may help you to resolve your problem.