How to I let the clicked nav-pill stays active using bootstrap?

css, javascript, nav, twitter-bootstrap, twitter-bootstrap-3

Solution

First you need to add default `class="active"` to the first element. Second you need to add `data-toggle="tab"` to the `<a />` element. See the docs

Your code becomes:

<ul id="menu_area" class="nav nav-pills nav-justified custom">
    <li class="active"><a href="#knowing_us" data-toggle="tab" id="menu_text">one</a></li>
    <li><a href="#knowing_us2" data-toggle="tab" id="menu_text">two</a></li>
    <li><a href="#knowing_us3" data-toggle="tab" id="menu_text">three</a></li>                                                    
</ul>

Demo

Problem

Below is how I created a menu links of my website using Bootstrap 3.1.0. I want the selected nag-pill to stay active/select while the link is clicked. Currently, the defined hover-colour is gone after the link is clicked. Is there a way to let the pill stay active after clicking? ``` <ul id="menu_area" class="nav nav-pills nav-justified custom"> <li><a href="#/knowing_us" id="menu_text">one</a></li> <li><a id="menu_text">two</a></li> <li><a id="menu_text">three</a></li> </ul> ``` ===Update=== I'm just new to JS and web development. The code that I'm trying to follow Twitter Bootstrap tutorial is here: http://jsfiddle.net/Dy9e6/ I just want the clicked nag-pill to show as 'selected' or 'highlighted' after user click on one of the pill/tab.

Original source