Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 23 total)
  • Author
    Posts
  • #196554
    css_fan5
    Participant

    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.

    #196603
    Shikkediel
    Participant

    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…

    #196628
    css_fan5
    Participant

    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…

    #196640
    css_fan5
    Participant

    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…

    #196657
    css_fan5
    Participant

    Thank you so much Shane,

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

    #199752
    css_fan5
    Participant

    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.

    #199755
    Shikkediel
    Participant

    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.

    #199758
    css_fan5
    Participant

    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…

    #199774
    Shikkediel
    Participant

    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…

    #199775
    css_fan5
    Participant

    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???

    #199776
    Shikkediel
    Participant

    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).

    #199777
    css_fan5
    Participant

    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.

    #199781
    Shikkediel
    Participant

    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.

    #199784
    css_fan5
    Participant

    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.

    #199785
    Shikkediel
    Participant

    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?

Viewing 15 posts - 1 through 15 (of 23 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.