Php 引导数据切换不工作

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

当我打开页面时，会显示活动选项卡以及与之关联的表

好

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

坏的

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

{%block body-%}
产品清单






{categories%%中的类别为%s}
{%if category.categoryName=='Food'%}
{%else%}
{%endif%}
身份证件
名称
价格
量
描述
行动
{category.products%中实体的%s}
{{entity.name}
${{entity.price}}
{{entity.quantity}}
{%用于实体中的说明。说明%}
{{description.productdescription}
{%endfor%}




--





--





{%endfor%}
{%endfor%}
{%endblock%}

---

当只有一个选项卡内容时，您有两个选项卡内容

<div class="tab-content">

只需将第二个选项卡面板移动到第一个选项卡内容分区，然后删除第二个不必要的选项卡内容分区

---

以下是。

当只有一个选项卡内容时，您有两个选项卡内容

<div class="tab-content">

只需将第二个选项卡面板移动到第一个选项卡内容分区，然后删除第二个不必要的选项卡内容分区

---

以下是。

您是否有可能提供一个jsbin或JSFIDLE来演示这个问题？我可以尝试，但我不能保证任何事情。我在用树枝。给我一个将小树枝模板转换成HTML的例子。您不应该需要twig或PHP来演示这个问题，对吗？全部是HTML和CSS。由于我们没有您的数据，我们无法重新创建您的纯HTML以查看问题。是的，但我使用for循环生成内容。我试着去复制，但是一切正常。我假设这是由于循环造成的，但我无法找出查看源代码的原因，并将其粘贴到jsbin或JSFIDLE或此处。在我们看到模板的最终输出之前，循环是不相关的。您是否可以提供一个jsbin或JSFIDLE来演示这个问题？我可以尝试，但我不能保证任何事情。我在用树枝。给我一个将小树枝模板转换成HTML的例子。您不应该需要twig或PHP来演示这个问题，对吗？全部是HTML和CSS。由于我们没有您的数据，我们无法重新创建您的纯HTML以查看问题。是的，但我使用for循环生成内容。我试着去复制，但是一切正常。我假设这是由于循环造成的，但我无法找出查看源代码的原因，并将其粘贴到jsbin或JSFIDLE或此处。循环是不相关的，直到我们可以看到模板的最终输出。如果我将选项卡内容移到for循环之外，那么两个表都会显示，功能也会中断。我看到你的小提琴在工作，但你提供的解决方案不能用小树枝来完成。我希望您知道我的意思，您可以在选项卡面板上使用style=“display:none；”，第一个除外。如果我将选项卡内容移到for循环之外，则两个表都会显示，功能也会中断。我看到你的小提琴在工作，但你提供的解决方案不能用小树枝来完成。我希望您知道我的意思，您可以在选项卡面板上使用style=“display:none；”，第一个除外。