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: /

I just want the clicked nag-pill to show as 'selected' or 'highlighted' after user click on one of the pill/tab.

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/Dy9e6/

I just want the clicked nag-pill to show as 'selected' or 'highlighted' after user click on one of the pill/tab.

• javascript
• css
• twitter-bootstrap
• twitter-bootstrap-3
• nav

• Your question isn't clear to me. Maybe create a demo at jsfiddle to show the problem. – isherwood Commented Feb 9, 2014 at 19:18
• isherwood, thanks for introducing me jsfiddle. I just posted my code as in the link I added to my post. – Kann Commented Feb 9, 2014 at 20:08

1 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 bees:

<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