Applying different CSS class on click using jQuery

Question

I'm currently setting up a WordPress site, using this template from ThemeForest, and here is the live preview of what I'm currently working on (which now should be working - please let me know if it's not working).

I configured the CSS so the left border when hovered would be the light gray color. Then, when the link was clicked on, the left border would then be the blue color I selected.

As shown below, the main problem I'm having with the navigation is in the CSS. The Portfolio link (Portfolio Section in picture) still has the selected class being applied, along with the internal unordered list item. I would like to have it look like the Blog Section in the picture, where the Blog link no longer applies the selected class item.

I asked the creator of the template why this was occurring; his response was there needs to be another link below that contained the title attribute 'allportfolio' so it would work properly. I tried adding this attribute to the main Portfolio link, but then closed the list completely.

When the menu is created, the browser creates the Portfolio selection the following way in HTML:

<ul class="main-menu" id="menu-main-menu">
    <li class="parent selected" id="menu-item-1172">
       <p><a href="http://localhost/portfolio/" style="color: rgb(57, 57, 57);">Portfolio</a></p>
    <div>
       <ul class="sub-menu">
           <li class="menu-item" id="menu-item-1158"><p><a data-filter="website-design" data-category="true" href="#">Website Design</a></p></li>
           <li class="menu-item" id="menu-item-1157"><p><a data-filter="print" data-category="true" href="#">Print</a></p></li>
           <li class="menu-item selected" id="menu-item-1156"><p><a data-filter="motion" data-category="true" href="#">Motion</a></p></li>
           <li class="menu-item" id="menu-item-1155"><p><a data-filter="identity" data-category="true" href="#">Identity</a></p></li>
           <li class="menu-item" id="menu-item-1167"><p><a data-filter="logos" data-category="true" href="#">Logos</a></p></li>
      </ul>
   </div>
   </li>

I tried to so something similar to this answer, but didn't work since it didn't seem to include anything within the list item. The following jQuery code below is my attempt:

/*Portfolio links remove selected CSS setting*/
    $('ul#menu-main-menu ul.submenu li p a').click(
        function(){
            $('ul#menu-main-menu li').removeClass('parent selected');
            $(this).addClass('parent menu-item');
    });

I feel stuck because I can't figure out how to have the HTML look like below (taking out the CSS class 'selected' and add the CSS class 'menu-item'):

<ul class="main-menu" id="menu-main-menu">
    <li class="parent menu-item" id="menu-item-1172">
       <p><a href="http://localhost/portfolio/" style="color: rgb(57, 57, 57);">Portfolio</a></p>
    <div>
       <ul class="sub-menu">
           <li class="menu-item" id="menu-item-1158"><p><a data-filter="website-design" data-category="true" href="#">Website Design</a></p></li>
           <li class="menu-item" id="menu-item-1157"><p><a data-filter="print" data-category="true" href="#">Print</a></p></li>
           <li class="menu-item selected" id="menu-item-1156"><p><a data-filter="motion" data-category="true" href="#">Motion</a></p></li>
           <li class="menu-item" id="menu-item-1155"><p><a data-filter="identity" data-category="true" href="#">Identity</a></p></li>
           <li class="menu-item" id="menu-item-1167"><p><a data-filter="logos" data-category="true" href="#">Logos</a></p></li>
      </ul>
   </div>
   </li>

UPDATE: @limelights answer seemed to work, but I found some jQuery that affects the link hover effects on the website and wasn't sure if that was the reason the answer to the code wasn't working is in the scripts.js file of the WordPress template

/* Links roll over effect */
    $('a').each(function(){
        if(!$(this).data('filter') && !$(this).parent().parent().parent().hasClass('pagination'))
            $(this).hoverFadeColor();
    })

Also, I'm very close to what I want to accomplish, using this code to finally keep the internal links open:

/*Portfolio links remove selected CSS setting*/
    $('ul#menu-main-menu li div ul.sub-menu:first li.menu-item p a').click(
        function(){
            $('ul#menu-main-menu > li').removeClass('selected');
            $('ul#menu-main-menu > li').css({'color' : '#222'}).addClass('menu-item');
            $('ul#menu-main-menu li div:first').show();
        });

But, what it's still doing (as seen below) is that it still has the text chosen like the selected text.

Any help is greatly appreciated!

Answer 1

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'})
});

Answer 2

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.

Answer 3

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.