title: cannot read property 'split' in jquery using add header active link
body: <p>In jquery I can't read the property 'split' which is in header active link.I added my code below with a snippet. Please some one help me to figure the problem and solve it.</p>
  
  <p>Here is my snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(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');
      }
    });
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;header id="header"&gt;
    &lt;nav id="main-menu" class="navbar navbar-default  navbar-fixed-top"&gt;
      &lt;div class="container"&gt;
        &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
                              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                              &lt;span class="icon-bar"&gt;&lt;/span&gt;
                              &lt;span class="icon-bar"&gt;&lt;/span&gt;
                              &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;/button&gt;
          &lt;a class="navbar-brand" href="/index"&gt;&lt;img src="/resources/images/logo.png" alt="logo"&gt;&lt;/img&gt;
          &lt;/a&gt;
          &lt;span class="" style="margin-left:10px;font-weight:bold;text-align:center;margin-top:18px;text-transform:uppercase;cursor:pointer"&gt; &lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="collapse navbar-collapse navbar-right"&gt;
          &lt;ul class="nav navbar-nav" style="text-transform:uppercase; font-size:14px; font-weight:600"&gt;
            &lt;li class="scroll"&gt;&lt;a href="/views/index.jsp"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li class="scroll"&gt;&lt;a href="/views/features.jsp"&gt;Features&lt;/a&gt;&lt;/li&gt;
            &lt;li class="scroll"&gt;&lt;a href="/views/services.jsp"&gt;Services&lt;/a&gt;&lt;/li&gt;
            &lt;li class="scroll"&gt;&lt;a href="/views/pricing.jsp"&gt;Pricing&lt;/a&gt;&lt;/li&gt;
            &lt;li class="scroll"&gt;&lt;a href="/blog/blog?page=1"&gt;Blog&lt;/a&gt;&lt;/li&gt;
            &lt;li class="scroll"&gt;&lt;a href="/views/contact.jsp"&gt;Contact&lt;/a&gt;&lt;/li&gt;
            &lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Still I have no idea what might be the problem</p>