title: code for onclick navbar item changes to active state
body: <p>I need to change the hover state of the navbar item to active state onclick.I do not know how to write the code for this bootsrap navbar as I cannot really access the links/ .Anything in jquery /javascript /php will be helpful.</p>
  
  <p>MY HTML CODE:</p>
  
  <p></p>
  
  <pre><code>&lt;div class="navbar-inner"&gt;
  
    &lt;ul class="nav navbar-nav"&gt;
  
      &lt;li class="nav-item active"&gt;
        &lt;a class="nav-link" href="#"&gt;HOME &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
      &lt;/li&gt;
  
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link" href="#"&gt;DETAILS&lt;/a&gt;
      &lt;/li&gt;
  
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link" href="#"&gt;ABOUT&lt;/a&gt;
      &lt;/li&gt;
  
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link" href="#"&gt;CONTACT&lt;/a&gt;
      &lt;/li&gt;
  
    &lt;/ul&gt;
  
  &lt;/div&gt;
  
  &lt;/nav&gt;
  </code></pre>
  
  <p>MY CSS CODE:</p>
  
  <p>.navbar
          {</p>
  
  <pre><code>      margin: 10px;
  
      }
  
      .navbar.center .navbar-inner
       {
  
          text-align: center;
      }
  
      .navbar.center .navbar-inner .nav 
      {
  
        float: none;
        display:inline-block;
      }
      .navbar .nav &gt; li &gt; a, .navbar .nav &gt; li &gt; a:first-letter,
      .navbar .nav &gt; li.current-menu-item &gt; a, 
      .navbar .nav &gt; li.current-menu-ancestor &gt; a 
      {
        display:        inline;
        color:          white;                        
        font-family:    'Droid Serif', Georgia, Times, serif;
        font-size:      12px;
        padding:        10px;
        font-weight:    bold;
        letter-spacing: 2.5px;
        border: 2px solid transparent;
  
  
  
  
      }
      .navbar .navbar-nav &gt; li &gt; a:hover,
      .navbar .navbar-nav &gt; li &gt; a:focus 
      {
  
          border: 2px solid black;
          border-radius: 10px;
          padding: 10px;  
  
  
  
      }
  
      .navbar-default .navbar-nav &gt; .active &gt; a, 
      .navbar-default .navbar-nav &gt; .active &gt; a:hover, 
      .navbar-default .navbar-nav &gt; .active &gt; a:focus 
      {
          color: white;
          background: black;
  
          border-radius: 10px;
          padding: 10px;
      }
  </code></pre>