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项目。

问题是最后一部分是在列表中检查的。这是垂直标签，我需要在列表中选中第一部分。我的代码出了什么问题？

这是生成的代码：

<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

我需要在列表中选中第一部分。我的代码出了什么问题？

您将每个单选按钮标记为已选中：

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

...但是只能检查其中一个组，所以最后一个获胜。而是仅使用checked块中的forloop.first标记在第一个无线电输入上呈现if属性：

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

选项卡的li检查问题

1 个答案: