在一个页面上使用多个Foundation 3选项卡
在一个页面上使用多个Foundation 3选项卡
提问于 2012-11-28 08:41:27
我有一个我想要的例子：
http://jsfiddle.net/challenger/m4BZt/
我有这样一个模板(我使用的是Backbone库)：
<div class="four columns productView">
<dl class="tabs">
<dd class="active"><a href="#<%= Id %>-tab1">Purchase</a></dd>
<dd class=""><a href="#<%= Id %>-tab2">Specification</a></dd>
</dl>
<ul class="tabs-content">
<li class="active" id="<%= Id %>-tab1">
<img src="http://placehold.it/400x300&text=[img]">
<h4><%= Title %></h4>
<p>
<a href="#" class="blue small nice button radius">Add to Cart »</a>
</p>
</li>
<li id="<%= Id %>-tab2">
<h4><%= Title %></h4>
<p><%= Description %></p>
<p>
<a href="#" class="blue small nice button radius">Add to Cart »</a>
</p>
</li>
</ul>
</div>但这是有问题的。不知怎么的，尽管它是changes tab visually，但它还是doesn't show me second tab content了，并向url bar添加了散列符号和模型Id with -tab[1|2] postfix。
也许我错过了什么？我该怎么做？谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-11-28 14:06:39
我认为您的命名约定不正确，Tab和Content必须如下所示：
如果您想要功能标签，只需确保每个标签都链接到一个ID，并且相应的标签具有#tabnameTab的ID。-Foundation Docs
选项卡：href="#ID"
内容：id="IDTab"
尝试类似下面的代码。
<div class="four columns productView">
<dl class="tabs">
<dd class="active"><a href="#<%= Id %>Buy">Purchase</a></dd>
<dd class=""><a href="#<%= Id %>Spec">Specification</a></dd>
</dl>
<ul class="tabs-content">
<li class="active" id="<%= Id %>BuyTab">
<img src="http://placehold.it/400x300&text=[img]">
<h4><%= Title %></h4>
<p>
<a href="#" class="blue small nice button radius">Add to Cart »</a>
</p>
</li>
<li id="<%= Id %>SpecTab">
<h4><%= Title %></h4>
<p><%= Description %></p>
<p>
<a href="#" class="blue small nice button radius">Add to Cart »</a>
</p>
</li>
</ul>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13600987
复制相关文章
点击加载更多
相似问题
使用SASS在单个页面上设置多个Foundation顶部栏的样式
在一个页面上使用多个选项卡div的问题
在同一页面上使用多个jquery
在同一页面上实现多个D3布局
同一页面上的多个动态选项卡组件
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
