在同一页面中使用Bootstrap和Django实现两个或多个选项卡面板

Question

在我的Django项目中，我使用了一个for循环来执行以下代码块。因此，生成了两个或更多的Bootstrap面板，每个面板里都有一个标签页。

我遇到的问题是，当在浏览器中查看页面时，只有第一个面板可以正常工作。也就是说，当我们点击第二个或第三个面板的标签时，实际上显示的却是第一个面板的内容！

{%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%}

有没有人能帮我解决这个问题？

Answer 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>

当然，你需要把这个解决办法应用到你所有的标签页上。