Question

我创建了两个引导程序选项卡，它们的数据来自Django函数。加载选项卡时，我可以轻松发布所有选项卡的基本数据，但是我想在单击选项卡后加载每个选项卡的数据，而不是将所有数据加载在一起。 Bootstrap使用href或data-target加载选项卡内容。因此，当我在href属性中设置django url并通过JavaScript激活选项卡时，将调用django函数，但引导程序不会打开该选项卡。它总是打开第一个标签。

<ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
  <li role="presentation" class="active"><a href="#tab_content1" id="home-tab"  role="tab" data-toggle="tab" aria-expanded="false">Profile</a>
  </li>
  <li role="presentation" class=""><a href="{% url 'edit_Peak' %}" role="tab" id="profile-tab3"  data-toggle="tab" aria-expanded="false">Monitor</a>
  </li>
</ul>
<div id="myTabContent" class="tab-content">
  <div role="tabpanel" class="tab-pane fade active in" id="tab_content1" aria-labelledby="home-tab">
  </div>
  <div role="tabpanel" class="tab-pane fade" id="tab_content3" name="tab_content3" aria-labelledby="profile-tab">
    {% include "setting/monitor.html" %}
  </div>
</div>

我的JavaScript代码是：

<script>
   $(document).ready(function(){
     switch("{{section}}"){
       case 'monitor':
            $('#myTabContent #tab_content3').tab('show');
            break;
       case 'profile':
            $('#myTab a[href="#tab_content1"]').click();
            break;
        }
      })
</script>

我还使用了下面的javascript来激活第二个选项卡，但是它没有启动。

$("#myTab").tabs("select", 2);

感谢您的帮助。

Answer 1

Bootstrap将显示您标记为“活动”的选项卡。因此，当返回第二个选项卡的HTML时，通过向其添加class="active"属性来使该选项卡处于活动状态。

也许您需要从上下文视图中传递该信息，并将该类添加到模板中的相应选项卡上。

单击引导程序选项卡并在选项卡内容上显示结果后，如何调用Django URL？

1 个答案: