2013-01-24 7 views
41

aktiviert wird, ich bin mit jquery 1,9 und jQuery UI 1.10Holen Sie die ID der Registerkarte (div)

Ich möchte die Registerkarte ID in der Lage sein zu erhalten, wenn auf eine Registerkarte klicken. Wenn ich zum Beispiel auf den Tab "Second" geklickt habe, möchte ich die "Tabs-2" -Antwort erhalten. - für 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')); 
    } 
}); 

Eine andere Lösung Updated jsFiddle Demo

+1

Zeit, um die gewählte Antwort zu aktualisieren, glaube ich :) –

Antwort

54

Getestet und Arbeiten mit jQueryUI 1.10 entfernt wurde, So erhalten Sie die ID der Registerkarte, wie sie ausgewählt ist:

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

'alert (ui.newTab. context.innerText) 'um die Registerkarte Angeklickt auf Text anzuzeigen –

+1

aktualisiert die richtige Antwort, weil ich denke, das ist eine bessere Lösung. Danke Lamah – AlvaroV

+0

nur zu wissen ... ist es falsch, den Weg zu benutzen, den @AdrienBe suggeriert? –

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

UPDATE:

Ich habe den Code unten bisher getan Holen Sie etwas, wenn Sie auf den Tab klicken, verwenden Sie die s wähle das Ereignis.

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

EDIT

Changed 'wählen' auf 'beforeActivate', wie es von der Version 1.10

+0

Der Code, den Sie bereitstellen, ist nicht vollständig kompatibel mit jquery ui 1.10. Wie auch immer ich möchte die Daten erhalten, indem Sie auf die Registerkarte klicken, nicht eine andere Schaltfläche auf der Seite. danke trotzdem – AlvaroV

+0

@ user1714198 - Siehe die aktualisierte Antwort bitte. – MuhammadHani

+0

Die "aktualisierte jsFiddle Demo" zeigt die gleiche Demo, Tabs und eine externe Schaltfläche, die die ausgewählte Tab-ID anzeigt. Wie gesagt, ich möchte die ID erhalten, indem ich auf den Tab klicke, nicht auf einen weiteren Button auf der Seite. – AlvaroV

2

Wenn Sie wollen

<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

dank getan, aber select event wurde in jquery entfernt ui 1.10 http://jqueryui.com/upgrade-guide/1.10/#removed-select-event-use-beforeactivate – AlvaroV

+0

danke mann .. Aber wenn Sie wissen wollten, wie man die href bekommen , hoffe "$ (ui.tab) .attr ('href')" hätte dir geholfen. –

+0

sollte es sein: $ (ui.newTab) .attr ('href') -> http://api.jqueryui.com/tabs/#event-beforeActivate sowieso, es gibt nichts zurück – AlvaroV

0

Verwenden aria-Kontrollen

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

Ich vermute, Sie möchten wissen, welche Registerkarte aktiviert wird und basierend darauf verschiedene Aktionen ausführen.

Anstatt Abrufen IDs und Attribute aus den HTML-Elementen, hier ist, wie Sie es tun:

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

das Activate-Ereignis nicht aufgerufen wird, wenn die Registerkarten erstellt bekommen. Dazu müssten Sie das Ereignis "tabscreate" in den Mix aufnehmen, aber Sie erhalten die Idee.

1

Untersuchen Sie das JQueryUI-Ereignisobjekt (verwenden Sie einen Browser-Debugger wie Mozillas Firebug- oder Chrome-Entwicklertools).

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

Dies funktioniert für mich

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

Ich benutze eine ähnliche Methode, um verschiedene "Geschmacksrichtungen" von Tabs zu erstellen .... durch Hinzufügen einer Klasse oder eines anderen Attributs kann ich bei der Aktivierung ein bestimmtes Verhalten aktivieren. –

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

Meiner Meinung nach, ist der einfachste Weg data- zum <li ...> hinzuzufügen, die die Laschen bilden.

Zum Beispiel:

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

Dann behandeln Sie das beforeActivate Ereignis (wenn das der Fall, dass Sie betrachten):

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

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

Zum Beispiel $(n).data("tabname") den Namen der Registerkarte zurückkehren würde. Auf diese Weise können Sie auch weitere Informationen zu den Registerkarten hinzufügen. Simplist Lösung und skalierbar glaube ich.

0

Es funktioniert für mich

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

Fügen Sie bitte eine Erklärung zu Ihrer Antwort hinzu. –

0

Der easyest Weg I ist gefunden:

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

Dies wird die ID aus der div Hexe ist aktiv zurück. Denken Sie daran, dass Sie #tabs in Ihre jquery.tabs ID ändern müssen.

Verwandte Themen