0

我有一个我想要的例子：

http://jsfiddle.net/challenge/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&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.

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

4

1 回答 1

1

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

如果您需要功能选项卡，只需确保每个选项卡都链接到一个 ID，并且相应选项卡的 ID 为#tabnameTab。-基金会文件

标签：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>
于 2012-11-28T14:06:39.277 回答