Can´t apply active class to sublinks on my page…

[css_fan5]

Hello all,

I have a piece of JS that applies the active class to the main nav but I also have some other links on each page that are not on the main nav. How can I apply the active class to the main nav when these sublinks are clicked.

MAIN NAV LINK 1 —> Sublink-A + Sublink-B + Sublink-C3

JS on CODEPEN: http://codepen.io/anon/pen/LEmZgj

I want to highlight the NAV LINK 1 when I click any of the sublinks in the same directory.

Your help is much appreciated.

[Shikkediel]

If you include the HTML in the pen, I’m sure the answer wouldn’t be too complicated. Doesn’t make much sense like this for an outsider…

[css_fan5]

Hi,

I am so sorry. I was exhausted and totally thought I posted both. Please see it below.

http://codepen.io/anon/pen/LEmZgj

Many thanks…

[css_fan5]

Hello Shane,

I have all the sub-links on the side nav. Instead of trying to work out this issue through jQuery, I just applied .active class on each sub-link manually (I had 5 in total) I know this is not the most elegant way to accomplish this but for now it will do the job as I am really crunched in time. However, I will definitely check out the link you sent me and try to incorporate jQuery sometimes next week. Thanks so much for your response though. The support is amazing on this forum.

Best…

[css_fan5]

Thank you so much Shane,

If I can´t figure it out or have any issues I will be sure to post it here.

[css_fan5]

Hello again,

As you might have guessed. I have got stuck at one point :) I wanted to take up on your previous offer for help :) The markup for the main nav was bunch of “a” tags inside a div. Now the html is slightly different. Please see:

http://jsfiddle.net/f5dxfqn7/

Now each a tag is wrapped inside another li element so my JS must be modified to work but I could not figure out how it must be done. Your help is appreciated.

Many thanks in advance.

[Shikkediel]

Could you maybe explain again clearly what you are trying to do exactly? I’m having a hard time figuring that out by the info provided.

[css_fan5]

Hello,

I am trying to apply “active” class to the active navigation item. My current JS code loops through the “a” links and it worked before but now I have modified my navigation so each a tag is inside another “li” tag and the script doesn’t loop through properly. JS selector needs to be modified but I don’t know how to do it. Hopefully it is bit more clear now.

Thanks…

[Shikkediel]

I can’t see how it would have worked before to be honest. Did you change the href attributes as well then? The script is invoked immediately and what it does is check the url in the address bar and compare it to the links within the a tags. Those urls will not match the active window so no class will ever be applied here.

Maybe I’m having a blind spot on this one…

[css_fan5]

No. My previous nav was structured as several “a” links wrapped inside a div with id of “navi”. It was looping through all the a tags inside the #navi div and making the comparison.

The problem occurred when I placed these a tags inside li tags. Based on the HTML I have posted, how can I loop through the a tags and apply the class active? Do you have any suggestions???

[Shikkediel]

One tricky thing I now noticed was that the fiddle didn’t have the jQuery library enabled. Made a tweak that seems to work :

$('#navi').find('a').each

http://jsfiddle.net/f5dxfqn7/2/

Hope that solves it (don’t copy the whole code from that though, it’s just for demonstration).

[css_fan5]

Hi,

I have used the code as a reference but still no luck. I am overlooking something but can’t figure out what. I am using Foundation5 and this is a responsive nav. It seems like the I need to target not navi but top-bar-section as when I added the active class manually to one of the a tags it made no difference. I would really appreciate if you could take a look at my final fiddle here:

http://jsfiddle.net/n47omd7y/

Many Thanks again.

[Shikkediel]

Please explain exactly what it is you’re trying to do. Is the intention maybe to make the page scroll to a section when a nav menu option is clicked? Or that the page should scroll to that section automatically when the page is accessed with different addresses (urls)?

Right now it only checks if the current web address matches any of the links, that must have an underlying reason…

There is no class .top-bar-section in the HTML by the way, only .top-bar. And a live link to your site could be helpful.

[css_fan5]

Hi,

All I want to do is to highlight the current nav element (by applying a specific class) based on the current url.

.top-bar-section is right in the middle.

<section class=”top-bar-section”> please see line 8.

[Shikkediel]

Ah, I really had a blind spot there. Still… it works as you say it should :

http://jsfiddle.net/n47omd7y/1/

What would not be correct about this otherwise?

[Author]

Posts