html - 选项卡的 li 检查问题

Question

大家好!我在 html 页面中添加了选项卡，用于在另一个页面中显示一个模型对象。

我的代码:

.tabordion {
    display: block;
    position: relative;
}

.tabordion input[name="sections"] {
    left: -9999px;
    position: absolute;
    top: -9999px;
}

.tabordion section {
    display: block;
}

.tabordion section label {
    border-bottom: 1px solid #696969;
    cursor: pointer;
    display: block;
    padding: 15px 20px;
    position: relative;
    width: 221px;
    z-index: 100;
}

.tabordion section article {
    display: none;
    left: 230px;
    min-width: 300px;
    padding: 0 0 0 21px;
    position: absolute;
    top: 0;
}

.tabordion section article:after {
    bottom: 0;
    content: "";
    display: block;
    left: -229px;
    position: absolute;
    top: 0;
    width: 220px;
    z-index: 1;
}

.tabordion input[name="sections"]:checked + label {
    font-weight: bold;
}

.tabordion input[name="sections"]:checked ~ article {
    display: block;
}

<div class="tabordion">
    <h4>Contents</h4>
    {% for subject in subjects %}
        {% if subject.book|safe == book.name|safe and subject.author|safe == user.username|safe %}
            <section id="section{{ subject.id }}">
                <input type="radio" name="sections" id="option{{ subject.id }}" checked>
                <label for="option{{ subject.id }}">{{ subject.name }}</label>
                <article>
                    {{ subject.content }}
                </article>
            </section>
        {% endif %}
    {% endfor %}
</div>

顺便说一下，我正在制作 django 元素。

问题是最后一部分首先 checkin 列表。这是垂直选项卡，我需要检查列表中的第一部分。我的代码有什么问题吗？

这是生成的代码:

<div class="tabordion">
        <section id="section1">
            <input type="radio" name="sections" id="option1" checked="">
            <label for="option1">New album</label>
            <article>
                Content
            </article>
        </section>



        <section id="section2">
            <input type="radio" name="sections" id="option2" checked="">
            <label for="option2">Name</label>
            <article>
                Content
            </article>
        </section>   
</div>

Answer 1

I need first section in list checked. What's wrong with my code?

将每个单选按钮标记为选中:

<input type="radio" name="sections" id="option{{ subject.id }}" checked>

...但是只能检查一组中的一个，因此最后一个获胜。相反，仅使用 if block 中的 forloop.first 标志在第一个单选输入上渲染 checked 属性:

<input type="radio" name="sections" id="option{{ subject.id }}" {% if forloop.first %}checked{% endif %}>

整个模板:

<div class="tabordion">
    <h4>Contents</h4>
    {% for subject in subjects %}
        {% if subject.book|safe == book.name|safe and subject.author|safe == user.username|safe %}
            <section id="section{{ subject.id }}">
                <input type="radio" name="sections" id="option{{ subject.id }}" {% if forloop.first %}checked{% endif %}>
                <label for="option{{ subject.id }}">{{ subject.name }}</label>
                <article>
                    {{ subject.content }}
                </article>
            </section>
        {% endif %}
    {% endfor %}
</div>