CSS 中带有表格的选项卡视图

发布于 2024-07-24 05:30:58 字数 902 浏览 3 评论 0原文

我需要 CSS 中的选项卡视图,每个选项卡都显示一个动态表格。 完整的表格是在循环中动态构建的,只有在那之后选项卡才应该隐藏和显示与每个选项卡相对应的每个表格。 有什么建议么? 选项卡的内容位于列表项内且仅在循环中。 开发是在 appspot 上使用 Django/Python 进行的。

下面的代码也不适用于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>
 </code></pre>

I need a tab view in CSS with each tab showing a dynamic table. The complete table is dynamically constructed in loop and only after that should the tabs should hide and show each of the table corresponding to each tab. Any suggestions? The content of the tab is within list item and in loop only.
The development is in Django/Python on appspot.

The following code does not work for jquery also, is there a problem somewhere?

<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>
 </code></pre>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

呆° 2024-07-31 05:30:58

查看 jQuery UI 选项卡; 这将满足您的要求。 使用纯 CSS 不可能做到这一点。

Check out jQuery UI Tabs; this will do what you're looking for. It's not possible to do this using pure CSS.

忘羡 2024-07-31 05:30:58

我突然想到了一些 Javascript 工具包所提供的功能。 像带有一些插件的 jQuery 或 Dojo 之类的东西可能在其 Dijit 库中有类似的东西。

Just of the top of my head, check out what some of the Javascript toolkits have to offer. Things like jQuery with a few plugins or Dojo might have something like that in its Dijit library.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文