使用 bootstrap 和 django 在同一页面内实现两个或多个选项卡面板

Posted 2023-02-24

【中文标题】使用 bootstrap 和 django 在同一页面内实现两个或多个选项卡面板

【英文标题】：implementing two or more tab panel within same page using boootstrap and django

【发布时间】：2014-09-28 14:03:31

【问题描述】：

在我的 django 项目中，我使用了一个 for 循环来迭代以下代码块。因此产生了两个或多个引导面板，每个面板都包含一个选项卡面板。

我的问题是，当在浏览器中看到页面时，只有第一个面板有效。即，当我们单击第二个或第三个面板的选项卡时，数据更改发生在第一个面板的选项卡中！。

%for obj in temp%
    <section id="main-content">
    <section class="wrapper">
    <div class="row">

      <section class="panel"id="obj.case_id">

          <header class="panel-heading">
                      <span class="label label-success">Case ID as per user submision :</span><span class="label label-inverse">obj.case_id</span>
                      <span class="tools pull-right">
                          <a href="javascript:;"class="icon-chevron-down"></a>
                          <!-- <a href="javascript:;" class="icon-remove"></a> -->
                      </span>
          </header>
            <div class="panel-body">

                  <section class="panel" >
                          <header class="panel-heading tab-bg-dark-navy-blue ">

                              <ul class="nav nav-tabs">
                                  <li class="active">
                                      <a data-toggle="tab" href="#home">Case_ID</a>
                                  </li>
                                  <li class="">
                                      <a data-toggle="tab" href="#about">Agency</a>
                                  </li>
                                  <li class="">
                                      <a data-toggle="tab" href="#profile">Officer</a>
                                  </li>
                                  <li class="">
                                      <a data-toggle="tab" href="#contact">Upload date</a>
                                  </li>
                              </ul>
                          </header>
                          <div class="panel-body">
                              <div class="tab-content">
                                  <div id="home" class="tab-pane active">
                                      obj.case_id
                                  </div>
                                  <div id="about" class="tab-pane active">obj.case_description</div>
                                  <div id="profile" class="tab-pane">obj.officer.username</div>
                                  <div id="contact" class="tab-pane">obj.date_created</div>
                              </div>
                          </div>
                  </section>
            </div>     
      </section>
    </div>
  </section>
  </section>
    %endfor%

有关此问题的任何帮助。

【参考方案1】：

一种可能的解决方案是使用迭代对象为每个选项卡添加一个唯一的 id：

<a data-toggle="tab" href="#home-obj.case_id">Case_ID</a>

在标签中：

<div id="home-obj.case_id" class="tab-pane active">
  obj.case_id
</div>

当然，您需要在您拥有的所有选项卡上应用此解决方案。