Question

我的这个html带有一些django模板标签。每颗药丸都有自己的内容。

点击每个NAV-PILLS后如何显示每个相应的内容？

NAV-药片

<div class="container-fluid bg-dark">
    <div class="container text-center">
        <ul class="nav nav-pills center-pills">
            {% for menu in menus %}
                {% if menu.mealtype == 'Breakfast' %}
                    <li role="presentation" class="active"><a href="#">Breakfast</a></li>
                {% endif %}
                {% if menu.mealtype == 'Lunch' %}
                    <li role="presentation"><a href="#">Lunch</a></li>
                {% endif %}
                {% if menu.mealtype == 'Dinner' %}
                    <li role="presentation"><a href="#">Dinner</a></li>
                {% endif %}
                {% if menu.mealtype == 'Supper' %}
                    <li role="presentation"><a href="#">Supper</a></li>
                {% endif %}
            {% endfor %}
        </ul>
    </div>
</div>

CONTENT

{% for menu in menus %}
<section id="services">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2 class="section-heading text-capitalize">{{ menu.title }}</h2>
                <hr class="primary">
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            {% for item in menu.menuitem_set.all %}
            <div class="col-lg-3 col-md-6 text-center">
                <div class="service-box">
                    <h4>{{ item.item_name }} <strong>{% if item.price %}${{ item.price|floatformat:2 }}{% endif %}</strong><span><p class="text-muted text-muted-psize"><em>{{ item.description }}</em></p></h4>
                </div>
            </div>
            {% cycle '' '' '' '</div><div class="row">'%}
            {% endfor %}
        </div>
    </div>
</section>
{% endfor %}

Answer 1

我会试试这个：

<div class="container-fluid bg-dark">
    <div class="container text-center">

        <div role="tabpanel">
            <ul class="nav nav-pills center-pills">
                <li role="presentation" class="active">
                    <a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">Breakfast</a>
                </li>
                <li role="presentation">
                    <a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">Lunch</a>
                </li>
                <li role="presentation">
                    <a href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab">Dinner</a>
                </li>
                <li role="presentation">
                    <a href="#tab4" aria-controls="tab4" role="tab" data-toggle="tab">Supper</a>
                </li>
            </ul>
        </div>

        <div class="tab-content">

            <div role="tabpanel" class="tab-pane fade in active" id="tab1">
                <div class="panel panel-jumbotron panel-default">
                    <div class="panel-body">
                        <!-- Insert content here per tab -->
                    </div>
                </div>
            </div>

            <div role="tabpanel" class="tab-pane fade" id="tab2">
                <div class="panel panel-jumbotron panel-default">
                    <div class="panel-body">
                        <!-- Insert content here per tab -->
                    </div>
                </div>  
            </div>

            <div role="tabpanel" class="tab-pane fade" id="tab3">
                <div class="panel panel-jumbotron panel-default">
                    <div class="panel-body">
                        <!-- Insert content here per tab -->
                    </div>
                </div>  
            </div>

            <div role="tabpanel" class="tab-pane fade" id="tab4">
                <div class="panel panel-jumbotron panel-default">
                    <div class="panel-body">
                        <!-- Insert content here per tab -->
                    </div>
                </div>  
            </div>

        </div>
    </div>
</div>

用nav-pills渲染django和html

1 个答案: