title: Bootstrap, nav-tabs, dropdown menus; how to set active tab based on URI
body: <p>I'm using Bootstrap nav-tabs/dropdown menus component as my primary navigation bar but I cant figure out how to set the active menu based on an incoming URI.</p>
  
  <p>There are a lot of different examples/posts on the net that use nav-tabs for hiding and displaying specific div content or working with the # symbol but I just want to read the incoming URI using PHP, the _SERVER["REQUEST_URI"] variable and set a tab active.  Be it a nested location in the navigation or not is also a problem.</p>
  
  <p>Here what I've been trying:</p>
  
  <pre><code>&lt;ul class="nav nav-tabs" id="supernav"&gt;
      &lt;li class="active"&gt;&lt;a href="/page1.html" data-toggle="tab"&gt;&lt;i class="icon-home" style="margin-top:4px;"&gt;&lt;/i&gt; Page 1&lt;/a&gt;&lt;/li&gt;
      &lt;li class="dropdown"&gt;
          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Page 2 &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
          &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a href="/page2.html" data-toggle="tab"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li class="divider"&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="/page2.2.html" data-toggle="tab"&gt;Page 2.2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="/page2.3.html" data-toggle="tab"&gt;Page 2.3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="dropdown"&gt;
          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Page 3 &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
          &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a href="/page3.html" data-toggle="tab"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li class="divider"&gt;&lt;/li&gt;
              &lt;li class="dropdown-submenu"&gt;
                  &lt;a href="/page3.2.html" data-toggle="tab"&gt;Page 3.2&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                      &lt;li&gt;&lt;a href="/page3.2.1.html" data-toggle="tab"&gt;Page 3.2.1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="/page3.2.2.html" data-toggle="tab"&gt;Page 3.2.2&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="/page4.html" data-toggle="tab"&gt;Page 4&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;script&gt;
  window.onload=function (e) {
      e.preventDefault();
      $('#supernav a[href="&lt;?=$_SERVER["REQUEST_URI"];?&gt;"]').tab('show');
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>Here are a couple URI examples:</p>
  
  <pre><code>http://abc.com/page1.html
  http://abc.com/page2.3.html
  http://abc.com/page3.2.2.html
  </code></pre>
  
  <p>Can anyone point me to a good example of how to accomplish this or am I just asking too much from this component?</p>
  
  <p>NOTE: I've preloaded all the bootstrap and jquery resources in my header.</p>