JQuery를 사용한 부트스트랩 탭 활성화

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();

누가 저를 도와주실 수 있나요?

에서 선택기 적용.nav-tabs작동 중인 것 같습니다.이 데모를 참조하십시오.

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

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

저는 @codedme의 답변을 선호합니다. 왜냐하면 페이지를 로드하기 전에 어떤 탭을 원하는지 알고 있다면 이 특정 작업에 JS를 사용하지 않고 페이지 html을 변경해야 할 것이기 때문입니다.

저는 그의 답변을 위해 데모도 수정했습니다.

(이 방법이 사용자에게 적용되지 않는 경우 브라우저, 환경 등의 설정을 지정하십시오.)

페이지가 준비될 때마다 탭 앵커에 대한 링크를 클릭합니다.

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

또는 바닐라 자바스크립트로

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

이것은 w3pcs: 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')

html 태그에 id 특성 추가

<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');

<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 요소에 활성 클래스를 추가합니다.또한 컨텐츠 디비에 활성 클래스를 추가하는 것이 필요하며, 클래스에서 페이드는 원활한 전환에 유용합니다.

이것과 씨름한 지 얼마 되지 않아 - 제 상황을 설명하겠습니다.

부트스트랩 모달 내에 탭이 있으며 로드 시 다음을 설정합니다(모달이 트리거되기 전).

$('#subMenu li:first-child a').tab('show');

탭을 선택한 동안에는 실제 창이 표시되지 않았습니다.따라서 추가해야 합니다.active창에도 클래스 지정:

$('#profile').addClass('active');

내 경우에는 창에#profile(그러나 이것은 쉽게 될 수 있었습니다..pane:first-child그러면 올바른 창이 표시됩니다.

부트스트랩 5.1.3에서 잘 작동합니다.

$('#nav-profile-tab').click();

먼저 활성 탭을 선택한 다음 선택한 탭 내용을 활성화하면 어떨까요?
먼저 탭의 <li > 요소에 클래스 'active'를 추가합니다.
그런 다음 'active' 클래스를 선택한 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'); 
        } 
    }

언급URL : https://stackoverflow.com/questions/17830590/bootstrap-tab-activation-with-jquery