If page is active, change class of navbar listitem?

Question

If page is active, change class of nav li?

I've tried this:

var page = 'home';
if (page == $("#home").value) {
    $( "#NavHome" ).addClass( "active" );
};

And the html:

<li id="NavHome">
  Home
</li>

On the page itself I made this:

<input type="hidden" id="home" value="home">

I want if the page is active, the class of #NavHome is active, if not, don't set the class to active..

Can someone help me or do you have a better solution?

---

Those doesn't help me:

• Uncaught TypeError: Cannot set property 'className' of null
• How to fire an event on class change using jQuery?
• Get the page file name from the address bar

Answer 1

When checking the value of a jQuery object, use jQuery methods:

if (page == $("#home").val()) {
    $("#NavHome").addClass("active");
};

Demo

Answer 2

Try this -

switch ($("#home").val())
{
   case "home":
         $('#NavHome').addClass('active');
         break;
}