Получить идентификатор активируемой вкладки (div)

Я использую jquery 1.9 и jquery UI 1.10

Я хочу иметь возможность получить идентификатор вкладки при нажатии на вкладку. Например, если я нажал вкладку с именем "Второй", я хочу получить ответ "tabs-2".

Я сделал код ниже:

<script type="text/javascript">
    $(function () {
        $("#tabs").tabs({
            beforeActivate: function (event, ui) {
                alert(/* the id of the tab (div) being activated */);
            }
        });
    });
</script>

<div id="tabs">
    <ul>
       <li><a href="#tabs-1">First</a></li>
       <li><a href="#tabs-2">Second</a></li>
    </ul>
    <div id="tabs-1">
        <p>abcde</p>
    </div>
    <div id="tabs-2">
        <p>fghi</p>
    </div>
</div>

Ответы

Ответ 1

Протестировано и работает с JQueryUI 1.10, как получить идентификатор вкладки по мере ее выбора:

$("#tabs").tabs({
  beforeActivate: function (event, ui) {
    alert(ui.newPanel.attr('id'));
  }
});

Ответ 2

var $tabs = $("#tabs").tabs({
    select: function( evt, ui ) {
        $("#current").text( $(ui.tab).attr('href'));
    }
})

UPDATE. Еще одно решение для jQuery UI 1.10

    $(function () { $('#tabs').tabs({ 
             activate: function (event, ui) {
             var active = $("#tabs").tabs("option", "active");
             alert($("#tabs ul>li a").eq(active).attr('href')); 
     } 
});

Обновлен jsFiddle Demo

Ответ 3

Это работает для меня

$( "#editor_tabs" ).tabs( { 
    activate: function ( event, ui ) {
        $(ui.newTab.find("a").attr("href")).html("Got It");
    }
});

Ответ 4

Если вы хотите что-то получить при нажатии на вкладку, используйте событие select.

$('#tabs').tabs({
  beforeActivate: function(event, ui){
     alert($(ui.tab).attr('href'));
 }
 });

ИЗМЕНИТЬ

Изменено 'select' to 'beforeActivate', поскольку оно было удалено из версии 1.10

Ответ 5

Используйте aria-controls

alert(ui.newTab.attr("aria-controls"));

Ответ 6

Я предполагаю, что вы хотите узнать, какая вкладка активирована, и на основе этого выполняются различные действия.

Вместо того, чтобы извлекать идентификаторы и атрибуты из элементов HTML, вот как вы это делаете:

$("#tabs").on("tabsactivate", (event, ui) => {
    if (ui.newPanel.is("#tabs-1")){
        //first tab activated
    }
    else{
        //second tab activated
    }
});

Событие активации не вызывается при создании вкладок. Для этого вам нужно добавить событие "tabscreate" в микс, но вы получите эту идею.

Ответ 7

Изучите объект события JQueryUI (используйте отладчик браузера, например, Mozilla Firebug или инструменты разработчика Chrome).

$("#tabs").tabs({        
    activate: function( event, ui ) { 
        console.log(event)  //unnecessary, but it how to look at the event object              
        alert(event.currentTarget.hash)
    }
});

Ответ 8

var id=$("ulselector li.ui-state-active").attr("aria-controls"));
alert(id);

Ответ 9

На мой взгляд, самый простой способ - добавить data- к <li ...>, которые составляют вкладки.

Например:

                <li data-index="2" data-tabname="Notes">
                  <a href="#tabs-Employee-Notes">Notes</a>
                </li>

Затем обработайте событие beforeActivate (если это событие, на которое вы смотрите):

$("#jqTabs_EmployeeDetails").tabs({
    heightStyle: "fill",
    beforeActivate: function (event, ui) {
        var n = ui.newTab;

        console.log($(n).data());
    }
});

Например, $(n).data("tabname") вернет имя вкладки. Это также позволяет вам добавлять любую другую информацию, необходимую для вкладок. Я считаю, что это простое решение и масштабируемое решение.

Ответ 10

Это работает для меня

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

Ответ 11

Самый простой способ найти это:

$('#tabs .ui-state-active').attr('aria-controls')

Это вернет идентификатор из div, который активирован. Помните, что вы должны изменить #tabs на свой ID jquery.tabs.