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

【问题标题】：implementing two or more tab panel within same page using boootstrap and django使用 bootstrap 和 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%}

有关此问题的任何帮助。

【问题讨论】：

标签： jquery python django twitter-bootstrap django-templates

【解决方案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>

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

【讨论】：