How To Add Active Class To A Navigation Menu Based On Url In Each Page

i have a navigation menu on top of my website .that li's content many pages with different urls. How to Add Active Class to a Navigation Menu Based on URL that in each page display

Solution 1:

This snippet will be useful

HTML

<ulid="menuList"><li><ahref="home">Home</a></li><li><ahref="gallery">gallery</a></li><li><ahref="about">about</a></li><li><ahref="contact">contact</a></li></ul>

JS

$('#menuList li').click(function(e){
 e.preventDefault(); //Remove this in your main code
    $('#menuList li').removeClass("active");
    $(this).addClass("active");
});

CSS

.active{
    background-color:green;
}

WORKING EXAMPLE