title: How to set navbar item as active when user selects it?
body: <p>I am a new ASP.NET Web Forms developer and trying to use Twitter Bootstrap with the Master Page. I am struggling with setting navbar item as active when user selects it. I created my simple master page by following <a href="http://www.mytecbits.com/microsoft/do%2a%2at-net/bootstrap-with-asp-net">this tutorial</a> about how to use Twitter Bootstrap with ASP.NET.</p>
  
  <p>Here's the code of my master page:</p>
  
  <pre><code>&lt;%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %&gt;
  
  &lt;!DOCTYPE html&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
  
      &lt;link href="css/bootstrap.css" rel="stylesheet" type="text/css" /&gt;
  
      &lt;asp:ContentPlaceHolder id="head" runat="server"&gt;
      &lt;/asp:ContentPlaceHolder&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
      &lt;div&gt;
          &lt;div class="container"&gt;
              &lt;div class="row-fluid"&gt;
                  &lt;div class="span12"&gt;
                      &lt;div class="page-header"&gt;
                          &lt;h1&gt;Hello... My First Website with Twitter Bootstrap&lt;/h1&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row-fluid"&gt;
                  &lt;div class="span3"&gt;
                      &lt;ul class="nav nav-list"&gt;
                          &lt;li class="nav-header"&gt;Navigation&lt;/li&gt;
                          &lt;li class="active"&gt;&lt;a href="Default.aspx"&gt;ASP.NET&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="Default2.aspx"&gt;Java&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;VB.Net&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;C#&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt; 
                  &lt;/div&gt;
                  &lt;div class="span9"&gt;
                      &lt;asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"&gt;
  
          &lt;/asp:ContentPlaceHolder&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Then, I added this script to <strong>the Head</strong> in order to fix issue with the menu:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          var url = window.location.pathname;
          var substr = url.split('/');
          var urlaspx = substr[substr.length - 1];
          $('.nav').find('.active').removeClass('active');
          $('.nav li a').each(function () {
              if (this.href.indexOf(urlaspx) &gt;= 0) {
                  $(this).parent().addClass('active');
              }
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>However, nothing has been changed. When I selected any item from the navigation bar, the active class has not been added to the new selected item and I don't know why. <strong>Could you please help me in fixing this issue.?</strong></p>