Jinja2 & Flask: вкладки Bootstrap отображают содержимое только для первой вкладки, а не для остальных - PullRequest
Новая
       15

Jinja2 & Flask: вкладки Bootstrap отображают содержимое только для первой вкладки, а не для остальных

0 голосов
/ 24 июня 2018

Я использую Jinja2 и Python для генерации html, а также использую загрузчик для css и js. Я пытаюсь создать вкладки таблеток Bootstrap с помощью циклов Jinja2 for и некоторой другой логики. Вот как выглядит мой код:

Я передаю этот словарь в функцию колбы render_template вместе с именем html-файла, который я хочу сгенерировать: 

my_dict = {"First tab": "tab1", "Second tab": "tab2", "Third tab": "tab3"}

Клавиши словаря представляют текст, который отображается как имя вкладки при загрузке веб-сайта. Значения ключей представляют собой строку, которая передается в атрибуты html для тегов (это станет более понятным, если вы посмотрите HTML ниже). Первая вкладка активна / выбрана, а остальные нет, когда какой-либо пользователь загружает сайт. Я использую эту логику Jinja2 в html-файле для генерации вкладок и контента: 

<ul class="nav nav-pills nav-fill" id="pills-tab" role="tablist">
    {% for name, attr in my_dict.items() %}

        {% if loop.index == 1 %}
            <li class="nav-item">
                <a class="nav-link active" id="{{ attr }}" data-toggle="pill" href="#{{ attr }}" role="tab"
                   aria-controls="{{ attr }}_c" aria-selected="true">{{ name }}
                </a>
            </li>

        {% else %}
            <li class="nav-item">
                <a class="nav-link" id="{{ attr }}" data-toggle="pill" href="#{{ attr }}" role="tab"
                   aria-controls="{{ attr }}_c" aria-selected="false">{{ name }}
                </a>
            </li>
        {% endif %}
    {% endfor %}
</ul>

После этого я генерирую содержимое для каждой вкладки с помощью другого цикла for. Вот HTML: 

<div class="tab-content" id="pills-tabContent">

    {% for attr in my_dict.values() %}

        {% if loop.index == 1 %}

            <div class="tab-pane fade show active" id="{{ attr }}_c" role="tabpanel"
                 aria-labelledby="{{ attr }}">
                <h4>This is a tab</h4>
            </div>

        {% else %}

            <div class="tab-pane fade" id="{{ attr }}_c" role="tabpanel" aria-labelledby="{{ attr }}">
                <h4>Hope this works</h4>
            </div>

        {% endif %}

    {% endfor %}

</div>

Я знаю, что последние две вкладки должны иметь одинаковое содержимое: Hope this works, а первая вкладка должна иметь This is a tab. Однако, когда я запускаю код, все три вкладки говорят одно и то же: This is a tab. Что вызывает такое поведение и как я могу это исправить? Заранее спасибо.

1 Ответ

0 голосов
/ 24 июня 2018

id ваших <a class="nav-link" в генерации html-кода для вкладок (первый опубликованный блок кода) - это не то, что контролирует действие вкладки во втором примере кода: скорее, href. Однако в первом блоке кода href равен {{ attr }}, а во втором {{ attr }}_c. Вместо этого попробуйте использовать тот же href ({{ attr }}_c"):

Обновить <a class в первом блоке кода: 

<a class="nav-link active" id="{{ attr }}" data-toggle="pill" href="#{{ attr }}_c" role="tab"
    aria-controls="{{ attr }}_c" aria-selected="true">{{ name }}
</a>
...