0

我正在尝试为我的 css 选项卡界面生成一个无序列表。我几乎采用了给我的示例并插入了适当的行来生成代码，但是选项卡标题只创建一次。我期望使用 forloop 有 4 个选项卡标题，如果我使用标准表，它会起作用。

这就是输出最终的样子：http: //imgur.com/a/WVRXX

预期的输出如下所示：http: //imgur.com/8xptd

这是生成的 HTML 输出：http: //pastebin.com/jLf1cvYM

如何让 forloop 生成我的预期结果？我在这里不知所措。

<div class="standard-tabs">
{% for vdev in pool.vdevs.all %}
{% for disk in vdev.disks.all %}

        <!-- Tabs Headings -->  
        <ul class="tabs">
        {% if forloop.first %}
                <li><a href="#{{ vdev.name }}">{{ vdev.name }}</a></li>
        {% else %}
        {% endif %}
        </ul>

        <!-- Tab Content -->
        <div class="tabs-content">
                <div id="#{{ vdev.name }}" class="with-padding">
                        {{ disk.serial }}
                </div>

{% endfor %}
{% endfor %}
</div>

这是我一直在研究的例子：

<!-- Wrapper, set tabs style class here -->
<div class="standard-tabs">

    <!-- Tabs -->
    <ul class="tabs">
        <li class="active"><a href="#tab-1">Selected tab</a></li>
        <li><a href="#tab-2">Another tab</a></li>
        <li><a href="#tab-3">Another tab</a></li>
        <li class="disabled"><a href="#tab-4">Disabled tab</a></li>
        <li>Non-active</li>
    </ul>

<!-- Content -->
<div class="tabs-content">

    <div id="tab-1" class="with-padding">

        Selected tab

    </div>

    <div id="tab-2" class="with-padding">

        Alternate tab

    </div>

    <div id="tab-4" class="with-padding">

        Disabled tab

    </div>

    </div>

</div>
4

1 回答 1

1

这只是肮脏的修复..它可能不起作用，但我可以看到你有一个错误。下面更正的模板：

<!-- language-all: lang-html -->
<div class="standard-tabs">
        <!-- Tabs Headings -->  
        <ul class="tabs">
{% for vdev in pool.vdevs.all %}
        {% if forloop.first %}
                <li class="active"><a href="#{{ vdev.name }}">{{ vdev.name }}</a></li>
        {% else %}
                <li><a href="#{{ vdev.name }}">{{ vdev.name }}</a></li>
        {% endif %}
{% endfor %}
        </ul>

        <!-- Tab Content -->
        <div class="tabs-content">
            {% for vdev in pool.vdevs.all %}
                <div id="#{{ vdev.name }}" class="with-padding">
                    {% for disk in vdev.disks.all %}
                        {{ disk.serial }} <br />
                    {% endfor %}
                </div>
            {% endfor %}
        </div>
</div>
于 2012-09-17T16:21:39.233 回答