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

Question

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.

Answer 1

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