基金会Zurb标签不起作用

问题描述：

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');

为什么不这项工作？

你的代码段没有引用任何所需的文件（jQuery的，基础的CSS和基础JS） – Yass

我想我已经在第2点报道。我已经包括了CSS，默认jQuery和foundation.min.js已经在我的头部分。 –

我的回答有道理吗？如果没有，请让我知道问题是什么。 – Yass

答

您的代码段不引用任何必需的文件，并且您不在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显示您的片段应该是什么样子。

基金会Zurb标签不起作用

相关推荐