I created this page: http://ikwebdesigner.com/special-characters/
When you click on the top navigation, it takes you to a place within the same page. I need the nav link to stay highlighted until I click another link in the top navigation. I already know about CSS :focus. But the focus style will disappear when I click elsewhere.
I’ve searched this site and Google for the past few months and all I’m getting is current link highlighting for external pages. I already know how to do that using PHP. What I don’t know how to do is make active links that are on the same page stay highlighted once clicked.
I need something, possibly jQuery, that will add an .active class so I can style it. And the link should stay that color until I click another link within that same group.
I’ve seen this done on a few sites, I open the code and try to duplicate it, but it doesn’t work for me. I was wondering if there was someone you could help me with.
Bonus points if the highlighted/active link could change depending on the different section I was on would be an awesome plus as well. I’ve seen this too.
I use a lot of jQuery, so perhaps something in jQuery would be best. Thanks in advance. I, however, don’t know jquery or javascript. I don’t know how to write it. I usually just find someone’s code/tutorial that works. In this case I haven’t be able to find something like this.
I see you have one page and you use anchors to move through it. Now having a menu with highlighted active section is what you want if I am getting you right.
You could do it in a variety of ways with jquery.
one way would be to record the selected index in a hidden field, and change the value on each click. then check the value of the hidden field and apply styling to the menu item on every menu click or page load, however you handle that.
the other option that comes to my mind is to check the URL path on every change. get the anchor ID from it and apply a style to the element with the id that corresponds to it.
Hope this gives you an idea.