it-swarm.asia

تنشيط علامة تبويب 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();

هل من الممكن ان يساعدني احد من فضلكم؟

58
user2607411

يبدو أن تطبيق محدد من .nav-tabs يعمل: انظر هذا العرض التوضيحي .

$(document).ready(function(){
    activaTab('aaa');
});

function activaTab(tab){
    $('.nav-tabs a[href="#' + tab + '"]').tab('show');
};

أفضل إجابة @ codedme ، لأنه إذا كنت تعرف علامة التبويب التي تريدها قبل تحميل الصفحة ، فيجب أن تقوم بتغيير الصفحة html وعدم استخدام JS لهذه المهمة المعينة.

أنا أنب التجريبي لإجابته ، كذلك.

(إذا لم يكن ذلك مناسبًا لك ، فيرجى تحديد الإعداد الخاص بك - المتصفح ، البيئة ، إلخ.)

139
MasterAM

قم بإجراء نقرة على رابط مرساة علامة التبويب عندما تكون الصفحة جاهزة ، أي.

$('a[href="' + window.location.hash + '"]').trigger('click');

أو في الفانيلا جافا سكريبت

document.querySelector('a[href="' + window.location.hash + '"]').click();
21
Kamran Ahmed

هذا واضح تمامًا من 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')
11
Amine Boulaajaj
<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 للمحتوى ، كما أن التلاشي في الفئات مفيد للانتقال السلس.

9
codedme

أضف سمة معرف إلى علامة 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');
5
Dmytro Goncharuk

لماذا لا تختار علامة تبويب نشطة أولاً ثم تنشط محتوى علامة التبويب المحددة؟
(1). أضف الفئة "نشطة" إلى عنصر <li> في علامة التبويب أولاً.
(2). ثم استخدم مجموعة "نشطة" للفئة المحددة.

    $(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'); 
        } 
    }
0
Kanit P.