Question

我开始研究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"
    }

}

不幸的是，这似乎并没有奏效。当页面最初加载时，我会看到＆＃34;场景＆＃34;按预期阻止填充，但是当我单击选项卡时，块就会消失，我只剩下base.html中的内容。有没有更好的方法在这些选项卡之间切换？我现在尝试这样做的方式出了什么问题？

Answer 1

当您加载索引页面时，Django会尝试呈现index.html模板。此模板扩展了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"> </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>块，最后html将如下所示：

display: block

当您设置{{1}}时，内容不会显示，因为没有要显示的HTML。

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

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

1 个答案: