jQuery UI 탭 - 현재 선택한 탭 인덱스를 가져오는 방법

jQuery UI 탭 - 현재 선택한 탭 인덱스를 가져오는 방법

이 구체적인 질문이 이전에 제기된 적이 있다는 것을 알고 있지만, 다음을 사용하여 어떠한 결과도 얻지 못하고 있습니다.bind()의 jQuery UI Tabs 플러그인

나는 단지 그것이 필요합니다.index탭을 클릭할 때 작업을 수행할 수 있습니다.bind()선택 이벤트에 연결할 수 있지만 현재 선택한 탭을 가져오는 일반적인 방법은 작동하지 않습니다. 인덱스가 한 탭 인덱스를 합니다.

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

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

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

});

이 코드를 사용하면 ui 개체가 다시 나타납니다. 설명서에서 이 개체는 ui.tab을 사용하여 새로 선택한 인덱스에 연결하는 데 사용하는 개체입니다.나는 이것을 이니셜에서 시도했습니다.tabs()호출 및 자체적으로도 가능합니다.제가 여기서 뭘 잘못하고 있는 건가요?

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

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

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

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

JQuery UI 1.9 이전 버전의 경우:ui.indexevent당신이 원하는 것입니다.

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

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

이전 버전의 경우 ui.index를 사용합니다.

UPDATE []_{Sun 08/26/2012} 이 답변이 너무 인기가 많아져서 본격적인 블로그/튜토리얼로 만들기로 했습니다.
jQuery UI에서 탭 작업에 대한 최신 쉬운 액세스 정보를 보려면 여기 내 블로그를 방문하십시오.
또한 (블로그에도) jsFiddle이 포함되어 있습니다.

---

: UI의 최신 에서는 jQuery UI(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 ....

PS. 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는 모든 힘든 일을 했습니다, 그렇게 어렵게 생각하지 마세요.

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

선택된 탭은 해당 시점의 현재 탭("이전" 탭)과 동일합니다.이는 클릭한 탭이 현재 탭이 되기 전에 "탭 선택" 이벤트가 호출되기 때문입니다.그래도 이런 식으로 하려면 "tabs show" 대신 "tabs show"를 사용하면 클릭한 탭과 동일하게 선택됩니다.

그러나 이벤트 내에서 index.ui.index를 사용하거나 이벤트 외부에서 $("#TabList").tabs(.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컨테이너의 의 값: " " " " " " " " " " " " " " " " " " " " " " " " " "

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탭 내용 패널과 연결되어 있습니다.이 링크 데모 in jqueryui 웹 사이트에서 이 클래스가 사용되는 것을 볼 수 있습니다. - http://jqueryui.com/tabs/ #순환

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

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

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

그러면 당신은 0부터 탭의 색인을 갖게 됩니다.

간단하죠.

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

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

다음을 시도합니다.

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

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

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

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

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

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

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이 표시됩니다.

와 같은 숨겨진 변수를 사용합니다.'<input type="hidden" id="sel_tab" name="sel_tab" value="" />'각 탭의 클릭 시 이벤트 쓰기 코드는 다음과 같습니다.

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

언급URL : https://stackoverflow.com/questions/300078/jquery-ui-tabs-how-to-get-currently-selected-tab-index