Question

我有一个我想要的例子：

我有这样一个模板（我正在使用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&amp;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>

但这打破了。不管怎么说doesn't show me second tab content changes tab visually，Id with -tab[1|2] postfix并将哈希标记和模型url bar添加到{{1}}。

也许我错过了什么？我怎么做？谢谢！

Answer 1

我认为您的命名约定已关闭，标签和内容必须如下：

如果您需要功能选项卡，请确保每个选项卡都链接到一个ID，并且相应的选项卡的ID为#tabnameTab。 - 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&amp;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>

在页面上使用多个Foundation 3选项卡

1 个答案: