Как сделать так, чтобы нажатая навигационная таблетка оставалась активной с помощью бутстрапа?

Ниже показано, как я создал ссылки меню своего сайта с помощью Bootstrap 3.1.0. Я хочу, чтобы выбранная пилюля оставалась активной/выбирала при нажатии на ссылку. В настоящее время определенный цвет при наведении исчезает после нажатия на ссылку. Есть ли способ, чтобы таблетка оставалась активной после нажатия?

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

===Обновление===

Я просто новичок в JS и веб-разработке. Код, которому я пытаюсь следовать учебнику Twitter Bootstrap, находится здесь: http://jsfiddle.net/Dy9e6/

Я просто хочу, чтобы нажатая пилюля отображалась как «выбранная» или «выделенная» после того, как пользователь щелкнул одну из таблеток/вкладок.


javascript css twitter-bootstrap twitter-bootstrap-3 nav
person Kann    schedule 09.02.2014    source источник
comment
Ваш вопрос мне не ясен. Возможно, создайте демонстрацию на jsfiddle.net, чтобы показать проблему.   -  person isherwood    schedule 09.02.2014
comment
isherwood, спасибо, что познакомили меня с jsfiddle.net. Я только что разместил свой код, как в ссылке, которую я добавил в свой пост.   -  person Kann    schedule 10.02.2014

Ответы (1)


arrow_upward
14
arrow_downward

Сначала вам нужно добавить class="active" по умолчанию к первому элементу.
Во-вторых, вам нужно добавить data-toggle="tab" к элементу <a />. См. документы

Ваш код становится:

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

Демо

person Rahil Wazir    schedule 09.02.2014
comment
Это такой элегантный способ! хотя я не могу воспроизвести с помощью Bootstrap 4. - person paulywill; 09.08.2017