使用bootstrap和django在同一个页面中实现两个或多个TAB面板

Question

在我的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%}

关于这个问题的任何帮助

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>

当然，你需要在你所有的选项卡上应用这个解决方案。