Struggling with a jquery issue where I can't seem to read the property 'split' from an active link in the header. I've included my code snippet below for reference, any help figuring out the problem would be greatly appreciated.
Snippet:
$(document).ready(function() {
var url = $(location).attr('href');
var parts = url.split("/");
var last_part = parts[parts.length - 1];
$("li").each(function() {
var link = $(this).find("a").attr('href');
var parts = link.split("/");
if (last_part == parts[parts.length - 1]) {
$(this).addClass('active');
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
<nav id="main-menu" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/index"><img src="/resources/images/logo.png" alt="logo"></img>
</a>
<span class="" style="margin-left:10px;font-weight:bold;text-align:center;margin-top:18px;text-transform:uppercase;cursor:pointer"> </span>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav" style="text-transform:uppercase; font-size:14px; font-weight:600">
<li class="scroll"><a href="/views/index.jsp">Home</a></li>
<li class="scroll"><a href="/views/features.jsp">Features</a></li>
<li class="scroll"><a href="/views/services.jsp">Services</a></li>
<li class="scroll"><a href="/views/pricing.jsp">Pricing</a></li>
<li class="scroll"><a href="/blog/blog?page=1">Blog</a></li>
<li class="scroll"><a href="/views/contact.jsp">Contact</a></li>
</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
</header>Still stuck on what might be causing this issue