- This topic is empty.
February 22, 2015 at 2:44 pm #196554
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.February 23, 2015 at 9:38 am #196603
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…February 23, 2015 at 12:54 pm #196628
I am so sorry. I was exhausted and totally thought I posted both. Please see it below.
Many thanks…February 23, 2015 at 2:56 pm #196640
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…February 23, 2015 at 11:24 pm #196657
Thank you so much Shane,
If I can´t figure it out or have any issues I will be sure to post it here.April 4, 2015 at 1:52 pm #199752
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:
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.April 4, 2015 at 5:57 pm #199755
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.April 5, 2015 at 1:38 am #199758
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…April 5, 2015 at 9:18 am #199774
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
atags. 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…April 5, 2015 at 9:26 am #199775
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???April 5, 2015 at 9:46 am #199776
One tricky thing I now noticed was that the fiddle didn’t have the jQuery library enabled. Made a tweak that seems to work :
Hope that solves it (don’t copy the whole code from that though, it’s just for demonstration).April 5, 2015 at 10:29 am #199777
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:
Many Thanks again.April 5, 2015 at 10:51 am #199781
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-sectionin the HTML by the way, only
.top-bar. And a live link to your site could be helpful.April 5, 2015 at 11:16 am #199784
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.April 5, 2015 at 11:21 am #199785
Ah, I really had a blind spot there. Still… it works as you say it should :
What would not be correct about this otherwise?