Question

我使用了来自Atmosphere的Meteor v0.8.2和zf5智能包（https://atmospherejs.com/package/zf5）（最近更新为Foundation v5.3.1）。我尝试使用垂直标签，但除了第一个有效的垂直标签外，我无法显示任何标签的内容。

我尝试在index.html和layout.html上的智能包中手动包含Foundation JS / CSS文件，切换到智能包Foundation5-sass，仔细检查JS版本，添加Meteor＆＃39; s jQuery智能包，在package.js（https://github.com/juliancwirko/meteor-zf5/blob/master/package.js）中切换add_files方法的顺序，并使用dl和dd标签而不是文档中的ul li标签。我也尝试使用zf5智能包的自述文件中建议的$(document).foundation('reflow');。

我无法判断这是智能包的问题，基金会的问题，还是我忽略了一些非常明显的问题。以下是我在主页上使用的HTML：

<!-- Chapter Tabs -->
<ul class="tabs vertical" data-tab>
   <li class="tab-title active"><a href="#intro">Introduction</a></li>
   <li class="tab-title"><a href="#chapter0">Chapter 0</a></li>
   <li class="tab-title"><a href="#chapter1">Chapter 1</a></li>
   <li class="tab-title"><a href="#chapter2">Chapter 2</a></li>
   <li class="tab-title"><a href="#chapter3">Chapter 3</a></li>
   <li class="tab-title"><a href="#chapter4">Chapter 4</a></li>
   <li class="tab-title"><a href="#chapter5">Chapter 5</a></li>
</ul>
<!-- Chapter Content -->
<div class="tabs-content vertical">
   <div class="content active" id="intro">
      <p>Introduction goes here.</p>
   </div><!-- end #chapter0 -->
   <div class="content" id="chapter0">
      <p>Chapter 0 goes here.</p>
   </div><!-- end #chapter0 -->
   <div class="content" id="chapter1">
      <p>Chapter 1 goes here.</p>
   </div><!-- end #chapter1 -->
   <div class="content" id="chapter2">
      <p>Chapter 2 goes here.</p>
   </div><!-- end #chapter2 -->
   <div class="content" id="chapter3">
      <p>Chapter 3 goes here.</p>
   </div><!-- end #chapter3 -->
   <div class="content" id="chapter4">
      <p>Chapter 4 goes here.</p>
   </div><!-- end #chapter4 -->
   <div class="content" id="chapter5">
      <p>Chapter 5 goes here.</p>
   </div><!-- end #chapter5 -->
</div><!-- end .tabs-content .vertical -->

这是layout.html：

<template name="layout">
   <div class="container">
    {{> header}}
      <div class="main">
       {{> yield}}
      </div><!-- end .main -->
    {{> footer}}
   </div><!-- end .container -->

 <script>
    $(document).foundation('reflow');
 </script>
</template>

该项目尚未在GitHub上，但如果需要更多信息，我会立即更新。

Answer 1

尝试将标签放在myTemplateWithTabs模板中（通过铁路由器产量或{{＆gt; myTemplateWithTabs}}渲染）并运行：

Template.myTemplateWithTabs.rendered = function () {
    $(document).foundation('reflow');
}

而不是像脚本标签那样在主模板中，它不会像那样

基础5.3.1不使用Meteor的选项卡

1 个答案: