Проблема с проверкой листинга табуляции

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>

Кстати, я делаю Джанго проект.

Проблема в том, что последний раздел сначала проверяется в списке. Это вертикальные вкладки, мне нужен первый раздел в списке. Что случилось с моим кодом?

Это сгенерированный код:

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