Question

我正在尝试为我的css标签界面生成一个无序列表。我已经把这个例子给了我并插入了相应的行来生成代码，但是标签标题只创建了一次。我期待使用forloop的4个标签标题，如果我使用标准表，它可以工作。

以下是生成的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>

Answer 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>

for循环生成无序列表的输出

1 个答案: