Question

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

当我打开我的页面时，活动选项卡会显示与其关联的表格。

GOOD

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

BAD

现在显示两个表。控制台中没有错误。我在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数据切换不起作用

1 个答案: