0

CSS タブ インターフェイスの順序なしリストを生成しようとしています。与えられた例をほとんど参考にして、適切な行を挿入してコードを生成しましたが、タブの見出しは 1 回しか作成されません。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 に答える