2016-04-19 1 views
0

Gibt es eine Möglichkeit, einen Tab von einem zweiten Link auf diesen Tab zu ziehen?Registerkarte "Firing Foundation 6" aus mehreren Links

Ich habe zwei Registerkarten, die Links innerhalb der Tabs-Titel arbeiten, aber ich möchte einen anderen Link zu Registerkarte 2 im Tab-Panel-Bereich von Registerkarte 1 enthalten - und umgekehrt.

Antwort

1

Sie können ein wenig Javascript verwenden. Fügen Sie diesen Anker auf den Inhalt des Registerkarte 1 bis geöffneten Reiter 2.

<a href="#" onclick="$('#example-tabs').foundation('selectTab', '#panel2');">Open Tab 2</a>

Hier ist ein Beispiel unter Verwendung der Registerkarten docs mit Panel hinzugefügt Choosers.

<div class="row"> 
     <div class="small-12 columns"> 
      <ul class="tabs" data-tabs id="example-tabs"> 
       <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li> 
       <li class="tabs-title"><a href="#panel2">Tab 2</a></li> 
      </ul> 
     </div> 

     <div class="tabs-content" data-tabs-content="example-tabs"> 
      <div class="tabs-panel is-active" id="panel1"> 
       <p><a href="#" onclick="$('#example-tabs').foundation('selectTab', '#panel2');">Open Tab 2</a></p> 
       <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p> 
      </div> 
      <div class="tabs-panel" id="panel2"> 
       <p><a href="#" onclick="$('#example-tabs').foundation('selectTab', '#panel1');">Open Tab 1</a></p> 
       <p>Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p> 
      </div> 
     </div> 
    </div> 

ZURB Foundation 6 selectTab Methode doc: http://foundation.zurb.com/sites/docs/tabs.html#selecttab

+0

Dank. Das hat funktioniert. – teamsiems

+0

Großartig! Würdest du das als die richtige Antwort betrachten? –