单击引导选项卡并在选项卡内容上显示结果后如何调用 django url？答案

【问题标题】：How to call a django url after clicking on a bootstrap tab and show results on the tab content?单击引导选项卡并在选项卡内容上显示结果后如何调用 django url？
【发布时间】：2019-06-04 02:29:27
【问题描述】：

我创建了两个引导选项卡，其数据来自 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);

感谢您的帮助。

【问题讨论】：

标签： django django-bootstrap3

【解决方案1】：

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

May be you need to pass that information from view in the context and add that class to appropriate tab in the template.

【讨论】：

谢谢罗汉。我也尝试过此解决方案，但“活动”类仅激活选项卡的标题，不会更改选项卡的内容。我还通过 javascript 触发了“点击”事件。当 'href' 属性的值是页面的一部分（选项卡内容的开头）但如果它的值是 django url，它不会激活选项卡的内容。
@AlirezaParvizimosaed，您是否还为标签内容以及tab_content3 设置了'active' 类？