Динамически создавать вкладки и вложенные вкладки на веб-странице на основе количества с родительской страницы

Question

У меня есть индексная страница, на которой записано количество вариантов использования (1-4), записей нет. сцен (1-x) для каждого варианта использования, и каждая сцена имеет набор одинаковых полей ввода.

Учитывая, что у меня есть указанные выше числа в javascript переменных, как мне динамически загружать вторую страницу на основе значений приведено на странице индекса.

Страница индекса, где мы определяем варианты использования и номер. сцен.

Вторая страница, на которую загружена страница в соответствии с количеством вариантов использования и сцен со страницы индекса

Вкладка вариантов использования:

    <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 переменные для хранения значений на странице индекса, а затем сгенерировать страницу с al oop все во внешнем интерфейсе.

см. Этот пример

Но для реальной функциональности ... Это можно легко сделать со стороны сервера.

На странице индекса, где действительно можно установить значения. Эти значения можно получить с помощью запросов POST.

Полученные значения генерируют следующую страницу на сервере, используя для l oop или что-то еще, а затем возвращают страницу.

Вы могли бы также хотите сохранить эти значения как переменные сеанса для конкретного клиента на стороне сервера.

см. этот пример для выполнения операции l oop на стороне сервера с использованием jinja и flask