jQuery UI 탭-현재 선택된 탭 인덱스를 얻는 방법

이 특정 질문이 이전에 요청 되었음을 알고 있지만 플러그인 의 bind()이벤트를 사용하여 결과를 얻지 못했습니다 jQuery UI Tabs.

index탭을 클릭 할 때 작업을 수행하려면 새로 선택한 탭이 필요합니다 . bind()선택 이벤트에 연결할 수 있지만 현재 선택한 탭을 가져 오는 일반적인 방법이 작동하지 않습니다. 새 탭이 아닌 이전에 선택한 탭 색인을 반환합니다.

var selectedTab = $("#TabList").tabs().data("selected.tabs");

다음은 현재 선택한 탭을 가져 오는 데 사용하려는 코드입니다.

$("#TabList").bind("tabsselect", function(event, ui) {

});

이 코드를 사용하면 ui 객체가 돌아옵니다undefined . 설명서에서 이것은 ui.tab을 사용하여 새로 선택한 인덱스에 연결하는 데 사용하는 개체 여야합니다. 나는 초기 tabs()호출과 자체적으로 이것을 시도했습니다 . 내가 여기서 뭔가 잘못하고 있니?

1.9 이전 JQuery와 UI 버전 : ui.index(가)에서 event당신이 원하는 것입니다.

JQuery UI 1.9 이상의 경우 : 아래 Giorgio Luparia 의 답변 을 참조하십시오 .

탭 이벤트의 컨텍스트 외부에서 탭 인덱스를 가져와야하는 경우 다음을 사용하십시오.

function getSelectedTabIndex() { 
    return $("#TabList").tabs('option', 'selected');
}

업데이트 : 버전 1.9에서 '선택됨'이 '활성'으로 변경되었습니다.

$("#TabList").tabs('option', 'active')

UPDATE [ _{일 2012년 8월 26일은} ]이 대답은 내가 본격적인 블로그로하기로 결정 정도로 인기를 끌고있다 / 튜토리얼을
참조하십시오 여기에 내 블로그 작업에 쉽게 접근 할 정보의 최신을 볼 탭 jQueryUI에
또한 포함 (블로그에서도) jsFiddle입니다.

¡ ¡ ¡ 업데이트! 참고 : jQueryUI (1.9+)의 최신 버전에서 ui-tabs-selected대체되었습니다 ui-tabs-active. !!!

이 스레드가 오래 되었다는 것을 알고 있지만 언급하지 않은 것은 "탭 이벤트"가 아닌 다른 곳에서 "선택된 탭"(현재 드롭 다운 패널)을 얻는 방법이었습니다. 나는 간단한 방법이 있습니다 ...

var curTab = $('.ui-tabs-panel:not(.ui-tabs-hide)');

그리고 쉽게 색인을 얻으려면 물론 사이트에 나열된 방법이 있습니다 ...

var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected'); // => 0

그러나 내 첫 번째 방법을 사용하여 색인과 해당 패널에 대해 원하는 모든 것을 매우 쉽게 얻을 수 있습니다 ...

var curTab = $('.ui-tabs-panel:not(.ui-tabs-hide)'),
    curTabIndex = curTab.index(),
    curTabID = curTab.prop("id"),
    curTabCls = curTab.attr("class");
        //  etc ....

추신. iframe 변수를 사용하고 .find ( '. ui-tabs-panel : not (.ui-tabs-hide)')를 사용하면 프레임에서 선택한 탭에 대해서도이 작업을 쉽게 수행 할 수 있습니다. jQuery는 이미 모든 노력을 다했으며 바퀴를 재발 명 할 필요가 없습니다!

확장 (업데이트 됨)

"보기에 둘 이상의 탭 영역이 있으면 어떻게합니까?"라는 질문이 나에게 제기되었습니다. 다시 말하지만 간단하게 생각하고 동일한 설정을 사용하되 ID를 사용하여 보유하려는 탭을 식별하십시오.

예를 들어 다음과 같은 경우 :

$('#example-1').tabs();
$('#example-2').tabs();

그리고 두 번째 탭 세트의 현재 패널을 원합니다.

var curTabPanel = $('#example-2 .ui-tabs-panel:not(.ui-tabs-hide)');

그리고 패널이 아닌 실제 탭을 원한다면 (정말 쉬웠 기 때문에 전에 언급하지 않았지만 지금은 철저히 할 것입니다)

// for page with only one set of tabs
var curTab = $('.ui-tabs-selected'); // '.ui-tabs-active' in jQuery 1.9+

// for page with multiple sets of tabs
var curTab2 = $('#example-2 .ui-tabs-selected'); // '.ui-tabs-active' in jQuery 1.9+

다시 말하지만, jQuery는 모든 노력을 다했다는 것을 기억하십시오. 그렇게 열심히 생각하지 마십시오.

JQuery UI 버전 1.9.0 이상을 사용하는 경우 함수 내에서 ui.newTab.index ()에 액세스 하여 필요한 것을 얻을 수 있습니다.

이전 버전의 경우 ui.index를 사용 하십시오 .

var $tabs = $('#tabs-menu').tabs();
// jquery ui 1.8
var selected = $tabs.tabs('option', 'selected');
// jquery ui 1.9+
var active = $tabs.tabs('option', 'active');

언제 UI 개체에 액세스하려고합니까? 바인드 이벤트 외부에서 액세스하려고하면 ui가 정의되지 않습니다. 또한이 줄이

var selectedTab = $("#TabList").tabs().data("selected.tabs");

다음과 같은 이벤트에서 실행됩니다.

$("#TabList").bind("tabsselect", function(event, ui) {
  var selectedTab = $("#TabList").tabs().data("selected.tabs");
});

selectedTab은 해당 시점의 현재 탭 ( "이전"탭)과 동일합니다. 이는 클릭 한 탭이 ​​현재 탭이되기 전에 "tabsselect"이벤트가 호출되기 때문입니다. 그래도이 방법을 사용하려면 대신 "tabsshow"를 사용하면 selectedTab이 클릭 한 탭과 동일하게됩니다.

그러나 원하는 모든 것이 인덱스라면 너무 복잡해 보입니다. 이벤트 내부의 ui.index 또는 이벤트 외부의 $ ( "# TabList"). tabs (). data ( "selected.tabs") 만 있으면됩니다.

이것은 버전 1.9로 변경되었습니다.

같은 것

 $(document).ready(function () {
            $('#tabs').tabs({
                activate: function (event, ui) {
                    var act = $("#tabs").tabs("option", "active");
                    $("#<%= hidLastTab.ClientID %>").val(act);
                    //console.log($(ui.newTab));
                    //console.log($(ui.oldTab));
                }
            });

            if ($("#<%= hidLastTab.ClientID %>").val() != "") 
            {
                $("#tabs").tabs("option", "active", $("#<%= hidLastTab.ClientID %>").val());
            }


        });

사용되어야한다. 이것은 나를 위해 잘 작동합니다 ;-)

누군가 iframe 내에서 탭에 액세스하려고 시도한 경우 불가능할 수 있습니다. div숨겨진, 선택 그냥 숨기거나하지 탭의는 결코 표시되지됩니다. 링크 자체는 선택된 것으로 표시된 유일한 부분입니다.

<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active ui-state-focus"><a href="#tabs-4">Tab 5</a></li>

다음은 href탭 컨테이너의 ID와 동일해야하는 링크 값을 가져옵니다 .

jQuery('.ui-tabs-selected a',window.parent.document).attr('href')

이것은 또한 다음 대신 작동해야합니다. $tabs.tabs('option', 'selected');

탭의 인덱스를 가져 오는 대신 탭의 실제 ID를 제공한다는 점에서 더 좋습니다.

가장 쉬운 방법은

$("#tabs div[aria-hidden='false']");

및 색인

$("#tabs div[aria-hidden='false']").index();

활성 탭 인덱스를 찾은 다음 활성 탭을 가리키는 경우

먼저 활성 인덱스를 가져옵니다.

var activeIndex = $("#panel").tabs('option', 'active');

그런 다음 CSS 클래스를 사용하여 탭 콘텐츠 패널을 가져옵니다.

// this will return the html element
var element=   $("#panel").find( ".ui-tabs-panel" )[activeIndex]; 

이제 추가로 사용하기 위해 jQuery 객체로 래핑했습니다.

 var tabContent$ = $(element);

여기에 클래스 .ui-tabs-nav가 탐색에 대한 두 가지 정보를 추가 .ui-tabs-panel하고 탭 콘텐츠 패널과 연결됩니다. jquery ui 웹 사이트의이 링크 데모에서이 클래스가 사용되는 것을 볼 수 있습니다-http: //jqueryui.com/tabs/#manipulation

$( "#tabs" ).tabs( "option", "active" )

그러면 0부터 탭의 인덱스가 있습니다.

단순한

다음을 시도하십시오.

var $tabs = $('#tabs-menu').tabs();

var selected = $tabs.tabs('option', 'selected');

var divAssocAtual = $('#tabs-menu ul li').tabs()[selected].hash;

아래 코드가 트릭을 수행한다는 것을 알았습니다. 새로 선택한 탭 인덱스의 변수를 설정합니다.

$("#tabs").tabs({
    activate: function (e, ui) {
        currentTabIndex =ui.newTab.index().toString();
    }
});

다음 게시물에서 아래 답변을 게시 할 수 있습니다.

var selectedTabIndex= $("#tabs").tabs('option', 'active');

선택한 탭 색인을 가져 오는 또 다른 방법은 다음과 같습니다.

var index = jQuery('#tabs').data('tabs').options.selected;

$("#tabs").tabs({  
    load:  function(event, ui){  
        var anchor = ui.tab.find(".ui-tabs-anchor");  
        var url = anchor.attr('href');  
    }  
});  

에서 URL의 변수는 현재 탭의 HREF / URL을 얻을 것이다

다음을 통해 찾을 수 있습니다.

$(yourEl).tabs({
    activate: function(event, ui) {
        console.log(ui.newPanel.index());
    }
});

다음과 같은 숨겨진 변수를 취하고 '<input type="hidden" id="sel_tab" name="sel_tab" value="" />'각 탭의 onclick 이벤트에서 다음과 같은 코드를 작성하십시오.

<li><a href="#tabs-0" onclick="document.getElementById('sel_tab').value=0;" >TAB -1</a></li>
<li><a href="#tabs-1" onclick="document.getElementById('sel_tab').value=1;" >TAB -2</a></li>

게시 된 페이지에서 'sel_tab'의 값을 얻을 수 있습니다. :), 간단합니다!

ui.newTab.index()모든 상황 (로컬 및 원격 탭)에서 사용할 수 있는지 확인 하려면 문서에 나와있는 대로 활성화 기능 에서 호출하십시오 .

$("#tabs").tabs({
        activate: function(event, ui){
             alert(ui.newTab.index());
             // You can also use this to set another tab, see fiddle...
             // $("#other-tabs").tabs("option", "active", ui.newTab.index());                   
        },
});

http://jsfiddle.net/7v7n0v3j/

$("#tabs").tabs({
    activate: function(event, ui) {
        new_index = ui.newTab.index()+1;
        //do anything
    }
});