Вкладка Bootstrap не работает, когда вкладка с целевым объектом данных вместо href

Я разрабатываю вкладки начальной загрузки с использованием атрибута data-target для соответствия вкладкам, вместо использования атрибута href, так как я разрабатываю приложение angular (href может испортить мой маршрут).

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a data-target="home">Home</a></li>
    <li><a data-target="profile">Profile</a></li>
    <li><a data-target="messages">Messages</a></li>
    <li><a data-target="settings">Settings</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="home">...</div>
    <div class="tab-pane" id="profile">...</div>
    <div class="tab-pane" id="messages">...</div>
    <div class="tab-pane" id="settings">...</div>
 </div>

<script>
    jQuery(function () {
        jQuery('#myTab a:last').tab('show')
    })
</script>

Смотрите эту скрипту http://jsfiddle.net/xFW8t/4/. Где я воссоздал целое.

Я не хочу, чтобы стиль загрузочного стиля применялся для моих вкладок, я хочу только функциональность, я хочу, чтобы мои стили применялись, так или иначе, чтобы остановить стиль загрузочного стиля? Пожалуйста, помогите в этом заблаговременно за любую помощь.

Ответ 1

Добавить data-toggle="tab" атрибут в вашей разметке

<a data-target="#home" data-toggle="tab">Home</a>

Демо-версия Js Fiddle

Ответ 2

попробуйте вот так:

jQuery(function () {
    jQuery('#myTab a').on('click', function() {
        $(this).tab('show');
    });
})

Ответ 3

Как уже упоминалось @Sachin, вы должны указать атрибут data-toggle. Кроме этого, убедитесь, что вы правильно заполните data-target. Они принимают селектора jQuery, id не, при использовании с `data-target. (ссылка)

Ответ 4

Если вы используете data-toggle="tab" - вы можете удалить инициализацию js -

<script>
    jQuery(function () {
        jQuery('#myTab a:last').tab('show')
    })
</script>

Bootstrap автоматически запустит табуляции.

Если вы хотите сначала запустить свои вкладки, вы можете удалить data-toggle="tab" из макета и вставить все вкладки отдельно:

$('#myTab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
})