Add class to anchor-link on other page

Question

I've got a navigation set up with links to anchors on specific page.

This works when on that specific page, but how can I add the class when coming from another page on my site?

<script>
jQuery(function ($) {
    $( document ).ready(function() {
        $(".sub-menu > li > a").on("click", function(){
            $("a.active").removeClass("curlink");
            $(this).addClass("curlink");
        });
    });
});
</script>

This is usually something you do backend, not frontend. – OptimusCrime Sep 13 '17 at 10:47 — OptimusCrime, Sep 13 '17 at 10:47

Himanshu Upadhyay · Answer 1 · 2017-09-13T10:52:13.450

There are many ideas/ways to achieve this, but if you have separate file which contains navigation code then you can do one way, you can put in a hidden element with value of id of the <a> tag of menu of navigation. So when you land on the page and found that id value from the hidden field in jquery, you can make that <a> of navigation activated. I mean you can apply active class to that menu. Tell me if this is not clear, I would try to make it simple.

In simple words,

Add one hidden element in your separate pages like <input type="hidden" value="about_us" id="nav-menu"> And in your master page,put jquery to get this value like: var nav_menu = $('#nav-menu').val(); so in nav_menu you will have about_us as its value.

Now, in main master view file, you can write jquery to add active class for relevant manu like: $('.sub-menu > li > a').removeClass('active');$('#'+nav_menu).addClass('active');

Thank you. But yes, please please try to simplify. – Morten Sep 13 '17 at 10:14 — Morten, Sep 13 '17 at 10:14

score 0 · Answer 2 · answered Sep 13 '17 at 10:32

Simply pass one more hidden input element say with id navigator
when you are clicking on a link with id #a1 then set this hidden element value to "a1"
Send this element with form
On receiver page check for value of this element say $("#navigator").val();
On the basis of the value of this, which is "a1" in this case, set CSS of link with id a1 whatever you want, using $("#a1").css();

score 0 · Answer 3 · answered Sep 13 '17 at 10:49

Another method is that on every hyperlink add a GET parameter and receive on the receiver side and on the basis of its value set CSS.

Let's say there are 3 links with id a1,a2,a3
Add a parameter say cameFrom in href URL e.g. href=".../*.html?cameFrom=a1" for link a1 and href=".../*.html?cameFrom=a2" for link a2 and so on

On receiver page get its value by using this function:

function param(name){
   return (location.search.split(name + '=')[1] || '').split('&')[0];
}

Use param(cameFrom) and get result. Link to this function

Add class to anchor-link on other page

3 Answers3