Активация вкладки Bootstrap с помощью JQuery

Question

Активация вкладки Bootstrap с помощью JQuery

у меня есть следующий код

<ul class="nav nav-tabs">

    <li><a href="#aaa" data-toggle="tab">AAA</a></li>

    <li><a href="#bbb" data-toggle="tab">BBB</a></li>

    <li><a href="#ccc" data-toggle="tab">CCC</a></li>

</ul>

<div class="tab-content" id="tabs">

    <div class="tab-pane" id="aaa">...Content...</div>

    <div class="tab-pane" id="bbb">...Content...</div>

    <div class="tab-pane" id="ccc">...Content...</div>

</div>

и следующий скрипт

$(document).ready(function(){

    activaTab('aaa');

});



function activaTab(tab){

    $('.tab-pane a[href="#' + tab + '"]').tab('show');

};

в этом случае, когда страница готова, вторая вкладка будет активирована, но я всегда получаю ошибку JavaScript в строке $('.tab-pane a[href="#' + tab + '"]').tab();

может кто-нибудь помочь мне, пожалуйста?

621 6

jQuery javascript twitter-bootstrap

6 ответов:

Comments

Ничего не найдено.

MasterAM · Accepted Answer · 2015-01-19 21:48:52

применение селектора из .nav-tabs Кажется, работает: Смотрите демо.
$(document).ready(function(){
    activaTab('aaa');
});

function activaTab(tab){
    $('.nav-tabs a[href="#' + tab + '"]').tab('show');
};
Я бы предпочел ответ @codedme, так как если вы знаете, какую вкладку вы хотите до загрузки страницы, вы, вероятно, должны изменить html-страницу и не использовать JS для этой конкретной задачи.

я менял демо для его ответа, а также.

(Если это не работает для Вас, пожалуйста, указать ваши настройки браузера, окружающей среды и т. д.)

Kamran Ahmed · Accepted Answer · 2018-07-04 11:42:11

выполните щелчок по ссылке на якорь вкладки, когда страница будет готова, т. е.
$('a[href="' + window.location.hash + '"]').trigger('click');
или в ванильном JavaScript
document.querySelector('a[href="' + window.location.hash + '"]').click();

codedme · Accepted Answer · 2013-07-24 13:36:15

<div class="tabbable">
<ul class="nav nav-tabs">
    <li class="active"><a href="#aaa" data-toggle="tab">AAA</a></li>
    <li><a href="#bbb" data-toggle="tab">BBB</a></li>
    <li><a href="#ccc" data-toggle="tab">CCC</a></li>
</ul>
<div class="tab-content" id="tabs">
    <div class="tab-pane fade active in" id="aaa">...Content...</div>
    <div class="tab-pane" id="bbb">...Content...</div>
    <div class="tab-pane" id="ccc">...Content...</div>
</div>
</div>   
добавить активный класс к любому элементу li, который вы хотите быть активным после загрузки страницы. А также добавление активного класса к содержимому div необходимо, fade в классах полезны для плавного перехода.

Amine Boulaajaj · Accepted Answer · 2017-05-03 22:07:48

Это довольно просто из w3schools:https://www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp
// Select tab by name
$('.nav-tabs a[href="#home"]').tab('show')

// Select first tab
$('.nav-tabs a:first').tab('show') 

// Select last tab
$('.nav-tabs a:last').tab('show') 

// Select fourth tab (zero-based)
$('.nav-tabs li:eq(3) a').tab('show')

Kanit P. · Accepted Answer · 2017-11-16 11:26:34

почему бы сначала не выбрать активную вкладку, а затем активировать выбранное содержимое вкладки ?
1. Сначала добавьте класс 'active' в элемент вкладки .
2. затем используйте set 'active' class для выбранного div.
    $(document).ready( function(){
        SelectTab(1); //or use other method  to set active class to tab
        ShowInitialTabContent();

    });
    function SelectTab(tabindex)
    {
        $('.nav-tabs li ').removeClass('active');
        $('.nav-tabs li').eq(tabindex).addClass('active'); 
        //tabindex start at 0 
    }
    function FindActiveDiv()
    {  
        var DivName = $('.nav-tabs .active a').attr('href');  
        return DivName;
    }
    function RemoveFocusNonActive()
    {
        $('.nav-tabs  a').not('.active').blur();  
        //to >  remove  :hover :focus;
    }
    function ShowInitialTabContent()
    {
        RemoveFocusNonActive();
        var DivName = FindActiveDiv();
        if (DivName)
        {
            $(DivName).addClass('active'); 
        } 
    }

Dmytro Goncharuk · Accepted Answer · 2018-08-09 12:52:48

добавить атрибут id в HTML-тег

<ul class="nav nav-tabs">
    <li><a href="#aaa" data-toggle="tab" id="tab_aaa">AAA</a></li>
    <li><a href="#bbb" data-toggle="tab" id="tab_bbb">BBB</a></li>
    <li><a href="#ccc" data-toggle="tab" id="tab_ccc">CCC</a></li>
</ul>
<div class="tab-content" id="tabs">
    <div class="tab-pane" id="aaa">...Content...</div>
    <div class="tab-pane" id="bbb">...Content...</div>
    <div class="tab-pane" id="ccc">...Content...</div>
</div>

затем с помощью JQuery

$("#tab_aaa").tab('show');