在一个页面上使用多个Foundation 3选项卡
在一个页面上使用多个Foundation 3选项卡
提问于 2012-11-28 16: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 22: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
复制相关文章
相似问题
腾讯云开发者
