jQuery UI Registerkarten: Dynamische Registerkarte aus einem Link anvisieren

Question

Kürzlich habe ich mich mit dem Öffnen einer Registerkarte mithilfe dieses Skripts befasst:

$('.tofour').click(function() { // bind click event to link
    $tabs.tabs('select', 3); // switch to third tab
    return false;
});

Mein spezielles Problem besteht jedoch darin, dass die Website, an der ich arbeite, nicht immer denselben Registerkartensatz lädt. Die Registerkarten können sich ändern, je nachdem, ob bestimmte Informationen vorhanden sind. Beispiel:

In bestimmten Situationen haben wir genug Daten für:

1. Produktdaten (#Übersicht)
2. Spezifikationen (#specs)
3. Zubehör (#accessories)
4. Dienstleistungen (#services)
5. Kundenrezensionen (#rezensionen)

In anderen Fällen reichen die Daten nur aus, um zwei Registerkarten zu füllen.

1. Produktdaten (#Übersicht)
2. Zubehör (#accessories)

Sie können sich vorstellen, dass dies ein Problem darstellt, da sich die Nummer der Registerkarte ändern kann; die Registerkarte Spezifikation ( #specs ) kann entweder die zweite oder die erste Registerkarte sein (wenn es keine Produktdaten gibt), oder es gibt überhaupt keine Registerkarte "Spezifikationen".

Nehmen wir also an, ich möchte die Registerkarte "Spezifikationen" anvisieren. Ich denke, das erste, was wäre zu prüfen, ob die div id #specs existiert. Dann muss ich wohl einen Link erstellen, der auf dieses Ziel ausgerichtet ist. Aber kann ich eine ID anstelle einer Registerkartennummer als Ziel angeben, wie in dem üblichen Beispiel (oben)?

Kann mir jemand dabei helfen? Meine jQuery-Fähigkeiten sind, ich schäme mich zuzugeben, ziemlich schlecht.

Ich danke Ihnen im Voraus.

Answer 1

Sie können den Index mit folgendem Code ermitteln und dann prüfen, ob er -1 ist (was bedeutet, dass er nicht existiert)

Hinweis: Dies setzt voraus, dass das a-Tag für die Registerkarte die id von specs hat

var index = $('#tabs a').index($('#specs'));

if (index > -1) {
    $('#tabs').tabs('select', index);
}

Answer 2

$("#m").live('click',function(){
    $('#tabs').tabs({ selected: "#tabs-1" });
});

Versuchen Sie dies. Informieren Sie mich weiter.

Answer 3

Erstellen Sie ein Javascript-Array, das die Registerkarten-ID als Schlüssel und den Registerkartenindex als Wert enthält:

// if you're using php and the tabs that need to be generated are in a variable called $tabs
// you could work this out in other languages
$count = count($tabs);
for($i=0;$i<=$count;$i++){
    $tab = $tabs[$i];
    echo 'tab_indexes[' . $tab['id'] . '] = ' . $i . ';'; // id as in #specs, etc
}

Verwenden Sie dann das Array in jQuery:

$('#to_specs').click(function() { // bind click event to link
    $('#tabs').tabs('select', tab_indexes['#specs']); // switch to specs tab
    return false;
});

Answer 4

Das sollte für das Szenario gut sein Sie können ersetzen element.id.match('specs') mit Ihrer gewünschten Bedingung

$('.tofour').click(function(evt) {
   $('#tabs a').each(function(index,element){
     if(index != -1 && element.id.match('specs')){
     $('#tabs').tabs('select', index);
     return false;
     }
   });
});