基金會Zurb標籤不起作用

Question

我不知道爲什麼這很複雜。

1>加載foundation.css

2>加載foundation.min.js

3>添加地基標籤以下代碼：

<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 class="tabs-content" data-tabs-content="example-tabs"> 
 
    <div class="tabs-panel is-active" id="panel1"> 
 
    <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>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>

4>將基礎和標籤初始化爲：

$(document).foundation(); 
 

 
$(document).foundation('tab', 'reflow');

爲什麼不這項工作？

Answer 1

您的代碼段不引用任何必需的文件，並且您不在javascript部分中調用$(document).foundation();。另外，初始化時不需要撥打reflow。

您只需要一個片段。您正在使用多個片段，並且所有內容都已分開，這就是您的示例被破壞的原因。

這是您的代碼段應該是什麼樣的（所有的內容是爲一個片段）：

$(document).foundation();

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.min.js"></script> 
 

 
<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 class="tabs-content" data-tabs-content="example-tabs"> 
 
    <div class="tabs-panel is-active" id="panel1"> 
 
    <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>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>

Fiddle Demo顯示您的片段應該是什麼樣子。