引导数据切换不起作用

Question

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

当我打开我的页面时，活动选项卡连同与之关联的表格一起显示。

好

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

不好

现在两个表都显示了。控制台中没有错误。我在 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。