在 Django 中显示的模板之间切换答案

【问题标题】：Switching between templates displayed in Django在 Django 中显示的模板之间切换
【发布时间】：2018-03-25 14:51:25
【问题描述】：

我开始着手开发一个 Django 应用程序。我想要两个不同的视图，当用户单击屏幕上的一个选项卡时它们会动态切换。这基本上是我所拥有的：

base.html:

<head>
    <script type="text/javascript" src="/static/base.js"></script>
</head>
<body>
    <div class="tab">
      <button class="tablinks" onclick="changeTab(event, 'teams')">Teams</button>
      <button class="tablinks" onclick="changeTab(event, 'scenarios')">Scenarios</button>
    </div>

    <div class="content container">
        <div class="tab-options">
            <div class="teams-tab" id="teams-tab">
                {% block teams %}
                {% endblock %}
            </div>
            <div class="scenarios-tab" id="scenarios-tab">
                {% block scenarios %}
                {% endblock %}
            </div>
        </div>
    </div>
</body>

teams.html：

{% extends "./base.html" %}

{% block teams %}
<body>
  <form action="{% url 'webapp:results' %}" method="get">
      <h1>You are on the teams page!</h1>
      <input type="submit" name="submit" value="Get Results!"><br>
  </form>
</body>
{% endblock %}

index.html:

{% extends "./base.html" %}

{% block scenarios %}
<body>
  <form action="{% url 'webapp:results' %}" method="get">
      <h1>You are on the scenarios page!</h1>
      <input type="submit" name="submit" value="Get Results!"><br>
  </form>
</body>
{% endblock %}

base.js：

function changeTab(event, tab) {
    tabcontent = document.getElementsByClassName("tab-options");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    if (tab == "teams") {
        document.getElementById("teams-tab").style.display = "block"
    } else if (tab == "scenarios") {
        document.getElementById("scenarios-tab").style.display = "block"
    }

}

不幸的是，这似乎不起作用。当页面最初加载时，我看到“场景”块按预期填充，但是一旦我单击选项卡，块就会消失，我只剩下 base.html 中的内容。有没有更好的方法在这些选项卡之间切换？我现在尝试这样做的方式有什么问题？

【问题讨论】：

标签： javascript html django django-templates

【解决方案1】：

当你加载索引页面时，Django 会尝试渲染 index.html 模板。此模板扩展了 base.html 并仅覆盖 scenarios 块，最终 html 将如下所示：

<head>
    <script type="text/javascript" src="/static/base.js"></script>
</head>
<body>
    <div class="tab">
      <button class="tablinks" onclick="changeTab(event, 'teams')">Teams</button>
      <button class="tablinks" onclick="changeTab(event, 'scenarios')">Scenarios</button>
    </div>

    <div class="content container">
        <div class="tab-options">

            <div class="teams-tab" id="teams-tab">
            </div>

            <div class="scenarios-tab" id="scenarios-tab">
                <body>
                    <form action="{% url 'webapp:results' %}" method="get">
                        <h1>You are on the scenarios page!</h1>
                        <input type="submit" name="submit" value="Get Results!"><br>
                    </form>
                </body>
            </div>

        </div>
    </div>
</body>

当您设置display: block 时，内容不会出现，因为没有要显示的html。

为了修复它，你需要渲染所有选项卡，然后使用 js 操作它们。

【讨论】：