Navbar Highlight For Current Page

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 this site w

Solution 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":

<li><ahref="index.html">Home</a></li>

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.

<scriptsrc="http://code.jquery.com/jquery-2.1.4.min.js"></script><script>
    $(function(){
        $('a').each(function(){
            if ($(this).prop('href') == window.location.href) {
                $(this).addClass('active'); $(this).parents('li').addClass('active');
            }
        });
    });
</script>

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

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

Solution 2:

If you have the same navigation bar in each HTML page of your website, then you can do like this: For example in index.html add class='active-page' to the first menu item:

<divid="nav_bar"><ul><li><ahref="index.html"class='active-page'>Home</a></li><li><ahref="status.html">Status</a></li><li><ahref="info.html">Info</a></li>

Then in the status.html add class='active-page' again but for the second item:

<divid="nav_bar"><ul><li><ahref="index.html">Home</a></li><li><ahref="status.html"class='active-page'>Status</a></li><li><ahref="info.html">Info</a></li>

And do this for all of your pages.

Finally in your css write a class for active-page like this:

#nav_barullia.active-page
{
  background-color:blue;
}

Solution 3:

I somewhere found a pretty simple code to do it.

<script>
    $(function () {
        $('nav li a').filter(function () {
            returnthis.href === location.href;
        }).addClass('active');
    });
</script>

Solution 4:

    $(function (){
        $('a').each(function(){
            if ($(this).prop('href') === window.location.href) {
                $(this).css({"background": "linear-gradient(to left, #f58D28 0, #f58D28 66%, #ba5c00 100%)", "border-radius": "30px"});
    
            }
        })
    })