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.

Portfolio Section - has two list items with CSS class selected applied and Blog Section - only one list item with CSS class selected applied

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.

selected text still applied to main menu list link, though the class was removed

Any help is greatly appreciated!

I didn't get the question completely, do you want the parent element to be unselected when the child is selected ? — Omid, Dec 06 '12 at 16:55
@OmidAmraei I'm sorry if I wasn't very clear. I do want the parent element to be unselected when the child is selected. — Abriel, Dec 06 '12 at 17:23
What i see in Live preview is the exact thing that you want. I think you have edited the template by wrong codes. — Omid, Dec 06 '12 at 19:43
@OmidAmraei I see what you mean, but the only difference between what I'm attempting and what's shown in the Live Preview is I didn't want the _All_ link. That does make what I want work, but I didn't want the _All_ link to show up in the main _Portfolio_ link. — Abriel, Dec 06 '12 at 20:32
Hi Abriel. I'm still a little confused by your issue exactly. Here is the intended behavior as I see it... I am only seeing the parent show with a grey left tab when I hover over an element in its section. Do you not want the parent to have this hover state whatsoever? For Example, lets say I'm under portfolio and I click on "Website Design", the issue is what, that the parent container still shows a hover state? I'm not seeing any odd behavior on the preview you provided. Where is the "All" link you are referencing? — Downpour046, Dec 10 '12 at 15:37
Hi @Downpour046. I probably made it confusing because of my many edits towards this post. But I actually took out the "All" link _(refer to the template link)_, as I want the parent link, "Portfolio" to replace that link. What I want the parent link to do is when I click on "Website Design", I want the parent link to not have the light gray left border on the side and the link itself to be a dark gray like the rest of the unselected links. The hover effect is fine, but then after you unhover it the first time, the light gray left border returns along with the link being black. — Abriel, Dec 10 '12 at 17:01
Let me know if you're confused by my above comment @Downpour046 — Abriel, Dec 10 '12 at 17:01
What i see is that something will assign a color(#393939) to parent `a` element when hovered. you don't need any extra code and just look up that event and remove it. — Omid, Dec 10 '12 at 18:03
Abriel, You actually don't appear to be having the issue anymore. What you're thinking to be an issue is your hover state. Example, click on "website" under Portfolio then move your mouse over to the right side of the screen. You'll notice the portfolio section does indeed lose its over state.. the problem is that you are keeping you r mouse hovered "over" the portfolio section, and that is why the state maintains because there is a hover state in place. So the second you move your mouse the hover state takes over. Move your cursor off the menu and you will see the styles leave. — Downpour046, Dec 10 '12 at 19:09
@Downpour046 that's not actually the issue. I got that when you move your mouse over the "Portfolio" it stays as selected even if you leave your mouse to any position in website out of the side bar. I think the event that handle this operation should be removed. — Omid, Dec 10 '12 at 20:06
@OmidAmraei That's what I mean, whenever the mouse is hovered off of there, the link is still seen as selected. But I did try removing that event and didn't get results. — Abriel, Dec 12 '12 at 06:01

Downpour046 · Answer 1 · 2012-12-10T15:56:41.907

3

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

edited Dec 10 '12 at 15:56

answered Feb 07 '12 at 19:16

Downpour046

1,661
9
14

This question is no longer relevant to the newly revised question above. If anyone can help me with this, I'd surely appreciate it. – Abriel Dec 05 '12 at 19:27
Are you talking about inserting this along with @limelights answer? – Abriel Dec 06 '12 at 18:45
I'm sorry to say, but no this doesn't give me the expected behavior. :( With the theme, it actually didn't allow for any of the theme to work properly (ex. the sidebar and portfolio didn't expand on hover). – Abriel Dec 06 '12 at 18:51
See updated CODE, make sure to copy the entire thing including the .on("click" modification. (Entire event) – Downpour046 Dec 10 '12 at 15:56
2

This looks like someone wants the work done for them and isn't trying to learn based off the answers given.. – Sphvn Dec 11 '12 at 01:42
@Lavabeams I've been trying to apply several of the different techniques below, updating the code I've implemented (based off of other answers below, as you can see in the update above) as well as pictures as I've been playing around with the different implementations of my code. I'm sorry if you feel this way and don't want anyone to think that I haven't been trying. – Abriel Dec 12 '12 at 05:10
@Downpour046 I'm really sorry but the code you implemented above only gave me the same results I had the time before I implemented the code, closing the internal links div no longer show and the main link still have the selected class applied. – Abriel Dec 12 '12 at 05:45
I will be updating my answer with the jQuery applied in my answer to the following script I have above. – Abriel Dec 12 '12 at 06:08

Henrik Andersson · Answer 2 · 2012-12-06T16:00:39.617

1

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.

edited Dec 06 '12 at 16:00

answered Dec 05 '12 at 21:46

Henrik Andersson

45,354
16
98
92

Thank you for the solution. It seems to work, but the problem I'm continuing to have with the code is whenever I click on the inner list item, it doesn't keep the it open and thus, removes the selected class off the main link. – Abriel Dec 06 '12 at 03:54
limelights, try adding e.preventDefault() to your solution. That might be why he's seeing it refresh – Downpour046 Dec 06 '12 at 15:10
Add $('ul#menu-main-menu li div ul.sub-menu li.menu-item p a').click(function(e){ $('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')); e.preventDefault(); }); – Downpour046 Dec 06 '12 at 15:14
No problem @limelights, but I tried the code you re-edited and it seems that it doesn't work either. :( It's still giving me the same effect the old code did. Sorry to disappoint. – Abriel Dec 06 '12 at 18:47

score 1 · Accepted Answer · edited Nov 20 '22 at 00:50

I did a 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.

This actually helped resolve the problem! :) Now I'm figuring out a way to combine what I wrote and putting it in the code I wrote above. — Abriel, Dec 12 '12 at 05:33
No thank you @JohnPeter :) This helped tremendously! Now to get this implemented in the scripts.js file, here we go. :) — Abriel, Dec 12 '12 at 06:15

score 0 · Answer 4 · answered Dec 06 '12 at 22:14

0

Adding some jQuery should solve your problem if you have a copy of what i see in Live preview without a mentionable customization.

$("#menu-main-menu li").click(function(){ 
    $("#menu-main-menu li").removeClass("selected"); 
});

answered Dec 06 '12 at 22:14

Omid

4,575
9
43
74

It doesn't remove the selected class off the parent element when selected. :( But the only customizable changes were in CSS and nothing else related to the links. – Abriel Dec 07 '12 at 02:01
This is what i tested on live preview and was working. Your template copy should be little different if does not work for you. – Omid Dec 07 '12 at 09:01
Yeah it's a bit different. I will be posting the template I modified because I think I'm confusing everyone on here later on today to give everyone a better idea and edit my answer. – Abriel Dec 07 '12 at 15:41
See updated post above, with new live preview. Sorry for the delay. – Abriel Dec 09 '12 at 18:32

Applying different CSS class on click using jQuery

4 Answers4