title: Bootstrap 3 selected tab background color
body: <p>I have a bootstrap 3 Top navigation bar with the following code and tabs:</p>
  
  <pre><code>&lt;div class="tabbable" style="background:#85131a; font-family:'Franklin Gothic Book'"&gt;
  &lt;!--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="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="#"&gt;Top Menu&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="navbar-collapse collapse" id="selectedtab"&gt;
      &lt;ul class="nav navbar-nav" style="font-size: 16px; color:white; font-family:'Franklin Gothic Book'"&gt;
          &lt;li&gt;
              &lt;a style="color:white; line-height:40px;" href="&lt;% $SPUrl:~sitecollection/ %&gt;" runat="server"&gt;START&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="dropdown"&gt;
              &lt;a class="dropdown-toggle" style="color:white; line-height:40px;" href="&lt;% $SPUrl:~sitecollection/tab1/ %&gt;" runat="server"&gt;Tab 1&lt;/a&gt;
              &lt;ul class="dropdown-menu"&gt;
                  &lt;li&gt;&lt;a href="&lt;% $SPUrl:~sitecollection/tab1/dd1/ %&gt;" runat="server"&gt;Dropdown item 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="&lt;% $SPUrl:~sitecollection/tab1/dd2/ %&gt;" runat="server"&gt;Dropdown item 2&lt;/a&gt;&lt;/li&gt;
  
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="dropdown"&gt;
              &lt;a class="dropdown-toggle" style="color:white; line-height:40px;" href="&lt;% $SPUrl:~sitecollection/tab2/ %&gt;" runat="server"&gt;Tab 2&lt;/a&gt;
              &lt;ul class="dropdown-menu"&gt;
                  &lt;li&gt;&lt;a href="&lt;% $SPUrl:~sitecollection/tab2/dd1 %&gt;" runat="server"&gt;Dropdown item 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="&lt;% $SPUrl:~sitecollection/tab2/dd2 %&gt;" runat="server"&gt;Dropdown item 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="&lt;% $SPUrl:~sitecollection/tab2/dd3 %&gt;" runat="server"&gt;Dropdown item 3&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="dropdown"&gt;
              &lt;a class="dropdown-toggle" style="color:white; line-height:40px;" href="&lt;% $SPUrl:~sitecollection/tab3/ %&gt;" runat="server"&gt;Tab 3&lt;/a&gt;
              &lt;ul class="dropdown-menu"&gt;
                  &lt;li&gt;&lt;a href="&lt;% $SPUrl:~sitecollection/tab3/dd1 %&gt;" runat="server"&gt;Dropdown item 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="&lt;% $SPUrl:~sitecollection/tab3/dd2 %&gt;" runat="server"&gt;Dropdown item 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="&lt;% $SPUrl:~sitecollection/tab3/dd3 %&gt;" runat="server"&gt;Dropdown item 3&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;                                                                    
  &lt;/div&gt;
  &lt;!--container--&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>$(document).ready(function () {
  $('#selectedtab ul li a').click(function (ev) {
      $('#selectedtab ul li').removeClass('selected');
      $(ev.currentTarget).parent('li').addClass('selected');
  });
  });
  </code></pre>
  
  <p>CSS (besides all the bootstrap standard css) :</p>
  
  <pre><code>#selectedtab ul li.selected {
  background-color:green !important;
  }
  </code></pre>
  
  <p>My question is how to get the selected tab (From Tab 1, Tab 2 or Tab 3) with a different background color? It should change background-color depending on the selected tab.</p>