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

페이지로드 전에 원하는 탭을 알고 있다면 페이지 html을 변경하고이 특정 작업에 JS를 사용하지 않아야하기 때문에 @codedme의 대답을 선호합니다.

나는 그의 대답을 위해 데모 를 조정했습니다 .

(이 기능이 작동하지 않으면 브라우저, 환경 등의 설정을 지정하십시오.)

---

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

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

또는 바닐라 JavaScript에서

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

---

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

---

<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에 활성 클래스를 추가해야하며, 페이드 인 클래스는 원활한 전환에 유용합니다.

---

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

---

먼저 활성 탭을 선택한 다음 선택한 탭 콘텐츠를 활성화하지 않는 이유는 무엇입니까?
1. 먼저 탭의 <li> 요소에 'active'클래스를 추가합니다.
2. 그런 다음 선택한 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