Obtenir L'ID de l'onglet (div) étant activé
j'utilise jquery 1.9 et jQuery UI 1.10
je veux être en mesure d'obtenir l'onglet ID lorsque vous cliquez sur un onglet. Par exemple, si j'ai cliqué sur tab nommé "Second" je veux obtenir la réponse "tabs-2".
j'ai fait le code ci-dessous:
<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>
11 réponses
testé et travaillant avec JQueryUI 1.10, comment obtenir L'ID de l'onglet comme il est sélectionné:
$("#tabs").tabs({
beforeActivate: function (event, ui) {
alert(ui.newPanel.attr('id'));
}
});
var $tabs = $("#tabs").tabs({
select: function( evt, ui ) {
$("#current").text( $(ui.tab).attr('href'));
}
})
UPDATE - une autre solution pour 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'));
}
});
Cela fonctionne pour moi
$( "#editor_tabs" ).tabs( {
activate: function ( event, ui ) {
$(ui.newTab.find("a").attr("href")).html("Got It");
}
});
Si vous voulez obtenir quelque chose en cliquant sur l'onglet, sélectionnez l'événement.
$('#tabs').tabs({
beforeActivate: function(event, ui){
alert($(ui.tab).attr('href'));
}
});
EDIT
change 'select' en 'beforeActivate' car il a été supprimé de la version 1.10
je suppose que vous voulez savoir quel onglet est activé, et basé sur cela exécuter diverses actions.
plutôt que de chercher des ID et des attributs à partir des éléments HTML, voici comment faire:
$("#tabs").on("tabsactivate", (event, ui) => {
if (ui.newPanel.is("#tabs-1")){
//first tab activated
}
else{
//second tab activated
}
});
activer L'événement n'est pas appelé quand les onglets créés. Pour cela, vous devez ajouter l'événement "tabscreate" dans le mix, mais vous avez l'idée.
examinez l'objet jQueryUI event (utilisez un débogueur de navigateur comme Firebug de Mozilla ou Chrome developer tools).
$("#tabs").tabs({
activate: function( event, ui ) {
console.log(event) //unnecessary, but it's how to look at the event object
alert(event.currentTarget.hash)
}
});
var id=$("ulselector li.ui-state-active").attr("aria-controls"));
alert(id);
Utilisez aria-controls
alert(ui.newTab.attr("aria-controls"));
À mon avis, le plus simple est d'ajouter data-<li ...> qui composent les onglets.
Par exemple:
<li data-index="2" data-tabname="Notes">
<a href="#tabs-Employee-Notes">Notes</a>
</li>
puis gérer l'événement beforeActivate (si c'est l'événement que vous regardez):
$("#jqTabs_EmployeeDetails").tabs({
heightStyle: "fill",
beforeActivate: function (event, ui) {
var n = ui.newTab;
console.log($(n).data());
}
});
Par exemple, $(n).data("tabname") renvoie le nom de l'onglet. Cela vous permet également d'ajouter toute autre information dont vous avez besoin pour les onglets. Simplist solution et évolutive je crois.
Cela fonctionne pour moi
$('#divName .ui-tabs-panel[aria-hidden="false"]').prop('id');
Le easyest façon que j'ai trouvée est :
$('#tabs .ui-state-active').attr('aria-controls')
ceci retournera L'ID de la sorcière div est active. Rappelez-vous que vous devez changer #tabs à votre jquery.tabs ID.