如何切换到另一个选项卡?

时间:2015-11-10 15:12:17

标签: javascript jquery ajax twig

我有两个标签 enter image description here

我需要切换到“VOTRESÉLECTION”,删除“NOTRE SELECTION DU MOMENT”的内容并改为显示其他内容。

我知道这是一些基本的AJAX,但我是后端开发者,我现在没时间学习这个:(

这是代码:

{{ include('_tabs.html.twig') }}
<section class="list">
    <div class="container">
        <div class="item-container">
            {% if isAmiral %}
                {% if (distance < 400 and distance > 200) or isParis %}
                    {{ blocks.home_selection_200_450km_idf|raw }}
                {% elseif distance < 200 %}
                    {{ blocks.home_selection_proximite|raw }}
                {% else %}
                    {{ blocks.selection|raw }}
                {% endif %}
            {% else %}
                {{ blocks.selection|raw }}
            {% endif %}
            {# CLEAR #}
            <div class="clear"></div>
        </div>
        <div class="list-btn">
            <a href="{{ rewrite_path(highlightmenu, {locale: app.request.locale}) }}">{{ 'button.all_highlights'|trans }}</a>
        </div>
    </div>
</section>

和tabs.html包含:

<section class="tabs-container full-image mode-{{ context }}">

    {% if (context == 'amiral') %}
        <nav class="tabs amiral">
            <ul class="list-inline">
                <li class="tab amiral-A"><a href="" class="tab-btn amiral-btn-A">{{ 'label.our_selection'|trans }}</a></li><!--
             --><li class="tab amiral-B selected"><a href="" class="tab-btn amiral-btn-B">{{ 'label.your_selection'|trans }}</a></li>
            </ul>
        </nav>
    {% elseif (context == 'sejour') %}
        <nav class="tabs sejour A-selected">
            <ul class="list-inline">
                <li class="tab sejour-A selected"><a href="" class="tab-btn sejour-btn-A">{{ 'label.favorites'|trans }}</a></li><!--
             --><li class="tab sejour-B"><a href="" class="tab-btn sejour-btn-B">{{ 'link.account_wishlist'|trans }}</a></li><!--
             --><li class="tab sejour-C"><a href="" class="tab-btn sejour-btn-C">{{ 'label.around'|trans }}</a></li>
            </ul>
        </nav>
    {% endif %}

</section>

JS:

if ($('.tabs.amiral').length == 1) {
    $('.tab-btn').on('click', function(e) {
        e.preventDefault();
        $(document).find('nav.tabs .tab').removeClass('selected');
        $(this).parent().addClass('selected');
    });
}

为了使这一点更清楚,我需要做一些这样的想法:

{% if VOTRE_SELECTION %}
    {{ display_block_a }}
{% else %}
    {{ display_block_B }}

那么我需要添加什么来使其工作?

0 个答案:

没有答案