複数のリンクからのFiring Foundation 6タブ

Question

そのタブへの2番目のリンクからタブをプルアップする方法はありますか？

私は2つのタブを持っていますが、タブのタイトルの中のリンクですが、タブ1のタブパネル領域内にタブ2への別のリンクを含めたいと思います。

Answer 1

少しのJavaScriptを使うことができます。ここでは2

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

タブを開くには、タブ1のコンテンツに、このアンカーを追加するパネルで、タブのドキュメントを使用した例である追加チュー。

<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財団6 selectTab方法ドキュメント：http://foundation.zurb.com/sites/docs/tabs.html#selecttab