Cần ID tab hiện đang được chọn cho các tab jQuery

Question

Tôi biết tôi có thể lấy chỉ mục của tab hiện được chọn nhưng tôi có thể lấy ID (tương đương với ui.panel.id nếu điều này được kích hoạt bởi sự kiện tab ... nhưng đó là không) của tab hiện được chọn? Tôi không muốn sử dụng chỉ mục vì thứ tự các tab có thể thay đổi. Tôi không muốn sử dụng các đánh dấu kiểu vì chúng có thể thay đổi trong các bản phát hành trong tương lai. Có một phương pháp cho điều này? Nếu không, tôi có thể bằng cách nào đó sử dụng chỉ mục để truy cập vào này (thậm chí có thể bằng cách truy cập vào đối tượng bảng điều khiển đầu tiên)? Bất kỳ ý tưởng nào khác?

Answer 1

Bạn có thể sử dụng :visible pseudo-selector để nhắm mục tiêu bảng điều khiển có thể nhìn thấy:

$("#tabs .ui-tabs-panel:visible").attr("id"); 

Nó đáng chú ý là bạn có thể lấy tab hoạt động từ activate event:

$("#tabs").tabs({ 
    activate: function (event, ui) { 
     console.log(ui.newPanel[0].id); 
    } 
}); 

Answer 2

Như tôi đã đăng tải trong một trả lời cho this question, có một số cách để đạt được điều này.

Trên jQuery documents, họ đề xuất để làm những điều sau đây để tìm ra chỉ số của các tab đang mở:

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

Tuy nhiên, điều này là không thực tế nếu bạn cần phải làm rất nhiều với tab đó. Tại sao họ chưa cung cấp một giải pháp thực tế hơn để nhận được yếu tố thực tế, tôi không chắc chắn, tuy nhiên, thông qua việc sử dụng jQuery có một giải pháp dễ dàng mà bạn có thể tự tạo ra.

Trong đoạn mã sau tôi sẽ chỉ cho bạn như thế nào dễ dàng là để làm bất cứ điều gì bạn muốn với tab hiện tại:

var curTab = $('.ui-tabs-panel:not(.ui-tabs-hide)'), 
    curTabIndex = curTab.index(), // will get you the index number of where it sits 
    curTabID = curTab.prop("id"), // will give you the id of the tab open if existant 
    curTabCls = curTab.attr("class"); // will give you an array of classes on this tab 
     // etc .... 
// now, if you wanted a little more depth, for instance specific tabs area (if you have multiple tabs on your page) you can do simply add to your selector statement 
var curTab = $('#myTabs_1 .ui-tabs-panel:not(.ui-tabs-hide)'); 
// then you can make simple calls to that tab and get whatever data or manipulate it how you please 
curTab.css("background-color", "#FFF"); 

Answer 3

Nếu bạn muốn id (hoặc thực sự là href) từ tab chọn , bạn có thể sử dụng eq() để truy xuất đối tượng jQuery.

Bạn có thể thấy một ví dụ ở đây: http://jsfiddle.net/svierkant/hpU3T/1/

Answer 4

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

Answer 5

Sau JQuery 1,9 chọn bị phản

Vì vậy, sử dụng

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

Answer 6

câu trả lời Jonathan Sampson của không hoạt động nữa. Hãy thử ...

$("#tabs .ui-tabs-panel:visible").attr("id");

jsFiddle: http://jsfiddle.net/tbEq6/

Answer 7

$("#tabs .ui-state-active a").attr("id"); 

Answer 8

này hoạt động:

$('#divName .ui-tabs-panel[aria-hidden="false"]').prop('id'); 

Answer 9

Đối với jQuery UI> = 1.9, bạn có thể sử dụng ui.newPanel.selector:

$('#tabs').on('tabactivate', function(event, ui) { 
    console.log(ui.newPanel.selector); 
}); 

Answer 10

Đối với phiên bản jquery dưới 1.9:

<div class="roundedFloatmenu"> 
     <ul id="unid"> 
      <li class="titleHover" id="li_search">Search</li>    
      <li class="titleHover" id="li_notes">Notes</li> 
      <li class="titleHover active" id="li_writeback">Writeback</li>   
      <li class="titleHover" id="li_attorney">Attorney</li> 
     </ul> 
    </div 

Và bạn có thể tìm thấy các tab hoạt động sử dụng:

jQuery('#unid').find('li.active').attr('id')