Bootstrap 数据切换不工作

Question

首先，是的，这个问题已被问过一百万次，但没有答案能解决我的问题。

当我打开我的页面时，活动选项卡会与与之关联的 table 一起显示。

好

当我单击其他选项卡时，与该选项卡关联的 table 会显示在我原来的 table 下方。（因此这两个选项卡现在都处于活动状态并正在显示，即使当前选择的是唯一应该显示的选项卡）

不好

现在显示了两个 table。控制台中没有错误。我在 js 之前包含 jquery。我也尝试使用 jquery 函数，即使它不需要，也没有改变。

我该如何解决这个问题？

{% block body -%}

    <h1 class="text-center">Product List</h1>

        <ul class="nav nav-tabs">
            <li role="navigation" class="active">
                <a data-toggle="tab" role="tab" aria-controls="tab1" href="#tab1">Category: Food</a>
            </li>
            <li role="navigation">
                <a data-toggle="tab" role="tab" aria-controls="tab2" href="#tab2">Category: Other</a>
            </li>  
        </ul>

{% for category in categories %}

    <div class="tab-content">

        {% if category.categoryName == 'Food' %}
            <div role="tabpanel" class="tab-pane active" id="tab1" >
        {% else %}
            <div role="tabpanel" class="tab-pane" id="tab2" >
        {% endif %}           

                <table class="table table-striped table-condensed table-hover">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>Name</th>
                                <th>Price</th>
                                <th>Quantity</th>
                                <th>Description</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                    <tbody>
                        {% for entity in category.products %}
                            <tr>
                                <td><a href="{{ path('product_show', { 'id': entity.id }) }}">{{ entity.id }}</a></td>
                                <td>{{ entity.name }}</td>
                                <td>${{ entity.price }}</td>
                                <td>{{ entity.quantity }}</td>
                                {% for description in entity.descriptions %}
                                    <td>{{ description.productDesciption }}</td>
                                {% endfor %}
                                <td>
                                    <ul class="list-inline">
                                        <li>
                                            <a href="{{ path('product_cart', { 'id': entity.id }) }}">Add Product To Cart</a>
                                        </li>
                                        <li>
                                            <p> -- </p>
                                        </li>
                                        <li>
                                            <a href="{{ path('product_show', { 'id': entity.id }) }}">Show</a>
                                        </li>
                                        <li>
                                            <p> -- </p>
                                        </li>
                                        <li>
                                            <a href="{{ path('product_edit', { 'id': entity.id }) }}">Edit</a>
                                        </li>
                                    </ul>
                                </td>
                            </tr>
                        {% endfor %}   
                    </tbody>
                </table>

            </div><!-- Ends tab2 TAB -->
            </div><!-- Ends tab1 -->

    </div><!-- Ends tab-content -->

{% endfor %}

<a class="btn btn-primary" href="{{ path('product_new') }}" role="button">Create a New Entry</a>

{% endblock %}

https://jsfiddle.net/USERALPHA32/s63LLmaq/

Answer 1

你有两个选项卡内容，而实际上应该只有一个。

<div class="tab-content">

只需将第二个选项卡面板移动到第一个选项卡内容 div。然后删除第二个不必要的 tab-content div.

这是JsFiddle。

Bootstrap 数据切换不工作

Bootstrap data-toggle not working

php

tabs

twig

twitter-bootstrap