代码之家 › 专栏 › 技术社区 › drevil

Django模板带有用于循环的BS5选项卡窗格

bootstrap-5 tabs django

drevil · 技术社区 · 2 年前

因此,我正在尝试制作一个带有选项卡和相应窗格的页面。我使用了原始的BS5代码,还找到了一些指南,如 this one

我调整了代码以适应Django模板,但它的行为非常奇怪:最初选择另一个选项卡时没有显示窗格,然后第一个选项卡再次显示所有窗格。

 <div class="row">
            <div class="card-header">
                <ul class="nav nav-tabs" id="specimen_tab" data-bs-tabs="tabs">
                    {% for a_s in analyte_specimen %}
                        <li class="nav-item">
                            <a class="nav-link{% if forloop.first %} active"
                               aria-current="true {% endif %}"
                               data-bs-toggle="tab"
                               href="#pane-{{ a_s.specimen.sg_id }}">{{ a_s.specimen.name }}</a>
                        </li>
                    {% endfor %}
                </ul>


                <div class="tab-content card-body" id="specimen_tabContent">
                    {% for a_s in analyte_specimen %}
                        <div class="tab-pane fade{% if forloop.first %} active{% endif %}"
                             id="pane-{{ a_s.specimen.sg_id }}">
                           <-- Content here -->
                        </div>
                           ......