從多個鏈接中激發基金會6選項卡

Question

有沒有辦法將第二個鏈接的選項卡拉到該選項卡上？

我有兩個選項卡，即選項卡標題工作內的鏈接，但我想在選項卡1的選項卡區域內包含選項卡2的另一個鏈接 - 反之亦然。

Answer 1

您可以使用一點JavaScript。此錨定到標籤1的內容添加到打開的選項卡2.

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

下面是使用的標籤的文檔與面板加入挑肥揀瘦一個例子。

<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方法DOC：http://foundation.zurb.com/sites/docs/tabs.html#selecttab