it-swarm.com.ru

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

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

Я хочу иметь возможность получить идентификатор вкладки при нажатии на вкладку. Например, если я нажал на вкладку с именем "Второй", я хочу получить ответ "вкладки-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> 
42
AlvaroV

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

$("#tabs").tabs({
  beforeActivate: function (event, ui) {
    alert(ui.newPanel.attr('id'));
  }
});
55
thenickdude
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

22
MuhammadHani

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

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

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

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

Правка

Изменено "select" на "beforeActivate", так как оно было удалено из версии 1.10

2
Pitchai P
var id=$("ulselector li.ui-state-active").attr("aria-controls"));
alert(id);
1
Nikhil Raj k

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

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

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

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

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

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

1
MoonStom

Меня устраивает

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

На мой взгляд, самый простой способ - это добавить _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") вернет имя вкладки. Это также позволяет вам добавлять любую другую информацию, необходимую вам, на вкладки. Упрощенное решение и масштабируемый я считаю.

0
Michael

Используйте арию-контроль

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

Самый простой способ, который я нашел, это:

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

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

0
Frank