Navbar highlight for current page

Question

I was wondering how I would add the ability to add a highlight box the nav bar on the page your currently on. You know so people know what page their on.

Very much like

Answer 1

You can use the jquery function window.location.href to compare the site you are on right now with your href of < a > in the list element. For example, "index.html":

Home

The code below searches for the href of the active page in the list elements < a >. Then adds the class "active" with addClass('active') to the active pages < a > so that you can now call it via CSS. Put this code in the head of your html file.

You can now add your css conditions like changing the color:

#nav_bar .active {
    color:            #F8F8F8;
    background-color: #4f81bd;
}