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>

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

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

1 个答案: