title: bootstrap.js auto activate navbar li in header
body: <p>I added bootstrap in my project for responsive design. All is well but it will make active ABOUT US in header menu but at the time of page is loading, HOME remains active. but as pages loaded completely, ABOUT US become active.</p>
  
  <p>I have taken bootstrap from CDN, link is as below <a href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" rel="nofollow">Bootstrap CDN link.</a>
  <strong>can any body help me.</strong></p>
  
  <p><strong>thanks in advanced.</strong></p>
  
  <p>below is bootstrap code from line 801 to 830.</p>
  
  <pre><code>b.prototype.process = function() {
      var a, b = this.$scrollElement.scrollTop() + this.options.offset,
          c = this.getScrollHeight(),
          d = this.options.offset + c - this.$scrollElement.height(),
          e = this.offsets,
          f = this.targets,
          g = this.activeTarget;
      if (this.scrollHeight != c &amp;&amp; this.refresh(), b &gt;= d) return g != (a = f[f.length - 1]) &amp;&amp; this.activate(a);
      if (g &amp;&amp; b &lt; e[0]) return this.activeTarget = null, this.clear();
      for (a = e.length; a--;) g != f[a] &amp;&amp; b &gt;= e[a] &amp;&amp; (void 0 === e[a + 1] || b &lt; e[a + 1]) &amp;&amp; this.activate(f[a])
  }, b.prototype.activate = function(b) {
      this.activeTarget = b, this.clear();
      var c = this.selector + '[data-target="' + b + '"],' + this.selector + '[href="' + b + '"]',
          d = a(c).parents("li").addClass("active");
      d.parent(".dropdown-menu").length &amp;&amp; (d = d.closest("li.dropdown").addClass("active")),
          d.trigger("activate.bs.scrollspy")
  }, b.prototype.clear = function() {
      a(this.selector).parentsUntil(this.options.target, ".active").removeClass("active")
  };
  var d = a.fn.scrollspy;
  a.fn.scrollspy = c, a.fn.scrollspy.Constructor = b, a.fn.scrollspy.noConflict = function() {
      return a.fn.scrollspy = d, this
  }, a(window).on("load.bs.scrollspy.data-api", function() {
      a('[data-spy="scroll"]').each(function() {
          var b = a(this);
          c.call(b, b.data())
      })
  })
  </code></pre>
  
  <p>my html code is as below</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="navbar-header"&gt;&lt;div class="slicknav_menu"&gt;&lt;margo aria-haspopup="true" tabindex="0" class="slicknav_btn slicknav_collapsed"&gt;&lt;span class="slicknav_menutxt"&gt;&lt;/span&gt;&lt;span class="slicknav_icon slicknav_no-text"&gt;&lt;span class="slicknav_icon-bar"&gt;&lt;/span&gt;&lt;span class="slicknav_icon-bar"&gt;&lt;/span&gt;&lt;span class="slicknav_icon-bar"&gt;&lt;/span&gt;&lt;/span&gt;&lt;/margo&gt;&lt;ul class="slicknav_nav slicknav_hidden" style="display: none;" aria-hidden="true" role="menu"&gt;
    &lt;li&gt; &lt;a href="#home" role="menuitem" tabindex="-1"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt; &lt;a href="#about" role="menuitem" tabindex="-1"&gt;About Us&lt;/a&gt; 
      &lt;!-- &lt;ul class="dropdown"&gt;
            &lt;li&gt;&lt;a href="#"&gt;Profile&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Press&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt; --&gt; 
    &lt;/li&gt;
    &lt;li&gt; &lt;a href="#" role="menuitem" tabindex="-1"&gt;Products &lt;/a&gt; 
      &lt;!-- &lt;ul class="dropdown"&gt;
            &lt;li&gt;&lt;a href="#"&gt;Features&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Pricing&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Customers&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Integrations&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt; --&gt; 
    &lt;/li&gt;
    &lt;li&gt; &lt;a href="#" role="menuitem" tabindex="-1"&gt;Services&lt;/a&gt; &lt;/li&gt;
    &lt;li&gt; &lt;a href="#" role="menuitem" tabindex="-1"&gt;Support&lt;/a&gt; 
      &lt;!--  &lt;ul class="dropdown"&gt;
            &lt;li&gt;&lt;a href="#"&gt;Product Guide&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Help&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Terms &amp; Privacy&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Developers&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt; --&gt; 
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#" role="menuitem" tabindex="-1"&gt;Register&lt;/a&gt; &lt;/li&gt;
    &lt;li&gt;&lt;a href="contact-us.php" role="menuitem" tabindex="-1"&gt; Contact Us &lt;/a&gt; &lt;/li&gt;
  &lt;/ul&gt;&lt;/div&gt; 
      &lt;!-- Stat Toggle Nav Link For Mobiles --&gt;
      &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt; &lt;i class="fa fa-bars"&gt;&lt;/i&gt; &lt;/button&gt;
      &lt;!-- End Toggle Nav Link For Mobiles --&gt; 
      &lt;a class="navbar-brand" href="http://localhost/kornerStone/" style="padding-top: 8px; padding-bottom: 7px;"&gt; &lt;img alt="" src="images/logo.png" class="img-responsive logo" style="margin-top:11px !important;"&gt; &lt;/a&gt; &lt;/div&gt;
    &lt;div class="navbar-collapse collapse"&gt; 
      &lt;!-- Stat Search --&gt; 
  
      &lt;!-- End Search --&gt; 
      &lt;!-- Start Navigation List --&gt;
      &lt;ul class="nav navbar-nav navbar-right"&gt;
        &lt;li class=""&gt; &lt;a href="#" style="padding-top: 20px; padding-bottom: 20px;"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li class="active"&gt; &lt;a href="#about" style="padding-top: 20px; padding-bottom: 20px;"&gt;About Us&lt;/a&gt; 
          &lt;!--ul class="dropdown"&gt;
                &lt;li&gt;&lt;a href="#"&gt;Profile&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Press&lt;/a&gt;
                &lt;/li&gt;
              &lt;/ul--&gt; 
        &lt;/li&gt;
        &lt;li&gt; &lt;a href="#service" style="padding-top: 20px; padding-bottom: 20px;"&gt;Services&lt;/a&gt; &lt;/li&gt;
        &lt;li&gt;&lt;a href="#" style="padding-top: 20px; padding-bottom: 20px;"&gt;Register&lt;/a&gt; &lt;/li&gt;
        &lt;li&gt;&lt;a href="contact-us.php" style="padding-top: 20px; padding-bottom: 20px;"&gt; Contact Us &lt;/a&gt; &lt;/li&gt;
      &lt;/ul&gt;
      &lt;!-- End Navigation List --&gt; 
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>in that you can see about us li has a class ACTIVE.</p>