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

StackOverflow https://stackoverflow.com/questions/300078

문제

이는 특정 질문되었습 질문하기 전에, 지만,나는 어떤 결과를 사용하는 bind() 이벤트 jQuery UI Tabs 플러그인입니다.

나는 단지가 필요합 index 의 새로 탭을 선택한 작업을 수행할 때 이 탭을 클릭합니다. bind() 할 수 있으로 후크를 선택하는 이벤트,그러나 나의 일반적인 방법을 얻기에는 현재 선택 탭이 작동하지 않습니다.그것을 반환합니다 이전에 선택한 탭을 지지 않은 새로운 하나:

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

는 코드는 다음과 같습니다 내가 사용하려고 시도하를 얻는 현재 선택된 탭:

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

});

내가 사용하는 경우 이 코드는,ui 개체 돌아온 undefined.에서 문서를,이해야한 객체 사용으로 후크는 새로 선택된 인덱스를 사용하여 ui.탭을 누릅니다.내가 노력이 초기 tabs() 전화에 또한다.내가 뭘 잘못하고 있는건가요?

도움이 되었습니까?

해결책

1.9 이전 jQuery UI 버전의 경우: ui.index ~로부터 event 당신이 원하는 것입니다.

jQuery UI 1.9 이상: 참조 대답 아래 Giorgio Luparia, 아래.

다른 팁

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

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

업데이트 : 버전 1.9 'Selected'에서 'Active'로 변경됩니다.

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

업데이트 [Sun 08/26/2012]이 답변은 너무 인기가있어서 본격적인 블로그/튜토리얼로 만들기로 결정했습니다.
방문하시기 바랍니다 여기 내 블로그 작업 할 수있는 최신 접근 정보를 보려면 탭 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.

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

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

다음과 같은 행사에서 실행됩니다.

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

SelectedTab은 해당 시점에서 현재 탭과 같습니다 ( "이전"One.) 클릭 된 탭이 현재 탭이되기 전에 "tabsselect"이벤트가 호출되기 때문입니다. 여전히 이런 식으로 수행하려면 "Tabsshow"를 사용하면 클릭 된 탭과 동일하게 선택됩니다.

그러나 원하는 만약 당신이 원하는 것이 색인이라면 과잉 복잡해 보입니다. 이벤트 내에서 ui.index 또는 $ ( "#abitist"). tabs (). data ( "selected.tabs")는 필요한 모든 것이 필요합니다.

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

버전 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

숨겨진 변수를 가져 가십시오 '<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
    }
});
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top