基于来自父页面的计数在网页上动态地生成标签和子标签

Question

我有一个索引页，其中记录了使用案例的数量(1-4)，记录号。每个用例的场景(1-x)，并且每个场景都有一组相同的输入字段。

考虑到我在javascript变量中有上述数字，我如何根据索引页面中给出的值动态加载第二个页面。

索引页，我们在这里定义用例和否。场景。

第二页，根据索引页中的用例数和场景数加载该页

Use case选项卡：

    <ul role="tablist" class="ibm-tabs" aria-label="Tab navigation">
          <li role="presentation"><a role="tab" href="#">Usecase 1</a></li>
          <li role="presentation"><a role="tab" href="#">Usecase 2</a></li>
          <li role="presentation"><a role="tab" href="#">Usecase 3</a></li>
          <li role="presentation"><a role="tab" href="#">Usecase 4</a></li>
        </ul>

场景：

            <li><a aria-selected="true" role="tab" href="#example2b-tab1">Intro Page</a></li>
            <li><a role="tab" href="#example2b-tab2">Scene 1</a></li>
            <li><a role="tab" href="#example2b-tab3">Scene 2</a></li>
            <li><a role="tab" href="#example2b-tab4">Scene 3</a></li>
            <li><a role="tab" href="#example2b-tab5">Scene 4</a></li>
        </ul>
    </div>
</div>
<!-- Tabs content body with tab contents divs inside a 4-3: -->
<div class="ibm-col-4-3 ibm-col-medium-5-3">
    <div id="example2b-tab1" class="ibm-tabs-content">
      <label for="__REPLACE_ME_1__" class="ibm-textcolor-green-60">Use case description<span class="ibm-required">*</span></label>
      <span>
        <input type="text" value="" size="70" id="first_name" name="first_name" required>
      </span>

Answer 1

如果您只是为了一个演示而工作，并且只想使用前端，那么您必须使用javascript变量来存储索引页面中的值，然后在前端生成一个循环页面。

查看此example

但对于真正的功能...这可以从服务器端轻松地完成。

在索引页面中，用户可以实际设置值。可以使用POST请求获取这些值。

有了这些值，received使用for循环或其他方法在服务器上生成下一个页面，然后返回该页面。

您可能还希望将这些值存储为服务器端特定客户端的会话变量。

有关在服务器端使用jinja和flask执行循环操作的信息，请参阅此example