How to Add Active Class to a Navigation Menu Based on URL?
Alright guys I am new jQuery and don't dabble to much in this stuff mostly just html language. But, I need to know how to add an active class to the li element of the navigation. I need to be able to do this as I am switching over my static html pages to a more dynamic environment where information is called from the server to help me in maintaining the site. So here is what I have so far: The page that I am working with / testing is the home page found at http:www.bomstudies.com
My jQuery Code:
Script Tag:
<script src="js/highlightNav.js"></script>
Code inside .js file:
$(function() {
var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/")+1);
$(".sf-menu a ").each(function(){
if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
$(this).addClass("active");
})
});
HTML Nav Code
My Nav / Menu Only Showing up to the first li element:
<nav class="menu-wrapper">
<div class="container menu-container">
<div class="menu-height">
<div class="consider-boxed">
<div class="row-fluid">
<div class="pull-left">
<nav>
<ul class="sf-menu" id="nav">
<li class="first-level-li">
<div class="menu-icon"><i class="icon-home icon-large"></i></div>
<div class="menu-item-wrapper">
<div class="first-level-li-text-link">Home</div>
</div>
</a>
</li>
Continue on etc not shown here.
Let me know what I should change or if there is a better way I have been working with this for hours and have finally trying my luck here. Any help is greatly appreciated - thanks!