Вкладка в CSS с таблицами

Question

Мне нужно представление вкладок в CSS с каждой вкладкой, показывающей динамическую таблицу. Полная таблица динамически строится в цикле, и только после этого вкладки должны скрывать и отображать каждую таблицу, соответствующую каждой вкладке. Какие-либо предложения? Содержимое вкладки находится внутри элемента списка и только в цикле. Разработка находится в Django / Python на appspot.

Следующий код не работает и для jquery, есть ли где-нибудь проблема?

<pre><code> <div id="tabs">
 <ul> 
{% for poolname in poolnamelist %}
 <li><a href="#mypool{{ forloop.counter }}">
<span>{{ poolname|escape }}</span></a></li>
 {% endfor %}
 </ul>
 {% for poolsequence in sequences %}
 <div id="mypool{{ forloop.counter }}">
 <table> 
{% for sequence in poolsequence %}
 <form action="/mypool" method="post">
 <tr><td>{{ sequence.seqdate }}</td>
 <td><input type="submit" value="ChangeDriver"/></td>
 </tr>
 </form>
 {% endfor %}
 </table>
 </div>
 {% endfor %}
 </div>
 

Answer 1

Оформить jQuery UI Tabs ; это сделает то, что вы ищете. Это невозможно сделать с использованием чистого CSS.

Answer 2

Из головы в голову, посмотрите, что предлагают некоторые из наборов инструментов Javascript. Такие вещи, как jQuery с несколькими плагинами или Dojo, могут иметь что-то подобное в библиотеке Dijit.