2016-05-31 16 views
1

Ich versuche, eine Gruppe von zwei Schaltflächen erstellen, die die aktive Registerkarte in jQuery Ui ändern wird. Was ich tun möchte, ist, den aktiven Tab-Index zu erhalten und dann zum nächsten Tab oder zum vorherigen Tab zu gehen, basierend darauf, welche Taste gedrückt wird.Dynamisch ändern aktiven Registerkarte Index jQuery UI Registerkarten

Wenn zum Beispiel die aktive Registerkarte die Nummer 3 ist, würde das Klicken auf "moveLeft" sie in 2 ändern. Wenn "moveRight" angeklickt wird, würde es zu 4 ändern. Ich weiß, dass es etwas wie folgt ist, aber nicht ganz:

var activeTab = $(".tabs").tabs("option", "active"); 

$('#moveLeft').click(function() { 
    $(".tabs").tabs({ activeTab: -1 }); 
}); 
$('#moveRight').click(function() { 
    $(".tabs").tabs({ activeTab: +1 }); 
}); 
+0

Mögliche Duplikat (http [Set aktiver Reiter durch einen Link, das ist außerhalb der Registerkarten klicken?]: // Stackoverflow .com/questions/15641134/set-active-tab-indem-klickt-ein-link-thats-außerhalb-der-tabs) –

+0

Das ist nicht dynamisch. Es erhält nicht die aktuelle Registerkarte und addiert oder subtrahiert sie, sondern legt sie basierend auf einer vorgegebenen ID fest. – DeanH

Antwort

0

Ich verstehe, dass Sie prev/next Tasten hinzufügen müssen. Ich brauchte das für einen Prozess mit Schritten. Ich habe jQuery UI Tabs und dies war für mich:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#ui-tabs').tabs(); 
     function GetSelTabIndex() { 
      return $('#ui-tabs').tabs('option', 'active'); 
     } 
     function ShowTabs(stepN) { 
      var n = parseInt(stepN); 
      $('#ui-tabs').tabs('option', 'active', parseInt(GetSelTabIndex()) + n); 
     } 

     $('#moveLeft, #moveRight').click(function() { 
      ShowTabs(this.value); 
     }) 
    }); 
</script> 

html:

<button id="moveLeft" value="-1">Previous tab</button> 
<button id="moveRight" value="1">Next tab</button> 
Verwandte Themen