Question

你好我是symfony的初学者，我正在开发一个web应用程序，我想在页面中创建多个选项卡。这是我的代码：

{＃base.html.twig＃}

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html"; charset=utf-8" />
        <title>{% block title %}healh management{% endblock %}</title>
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        {% block stylesheets %}
            <link href='http://fonts.googleapis.com/css?family=Irish+Grover' rel='stylesheet' type='text/css'>
            <link href='http://fonts.googleapis.com/css?family=La+Belle+Aurore' rel='stylesheet' type='text/css'>
            <link href="{{ asset('css/screen.css') }}" type="text/css" rel="stylesheet" />
            <link rel="stylesheet" type="text/css" href="{{ asset('bundles/bgpredictbg/css/jquery.ui.all.css')}}"/>
        {% endblock %}
        <link rel="shortcut icon" href="{{ asset('favicon.ico') }}" />

    </head>
    <body>

        <section id="wrapper">
            <header id="header">
                <div class="top">
                    {% block navigation %}
                        <nav>
                            <ul class="navigation">
                                <li><a href="{{ path('preBgBundle_homepage') }}">Login</a></li>
                                <li><a href="{{ path('preBgBundle_about') }}">About</a></li>
                                <li><a href="{{ path('preBgBundle_contact') }}">Contact us</a></li>
                            </ul>
                        </nav>
                    {% endblock %}
                </div>

                <hgroup>
                    <h2>{% block blog_title %}<a href="{{ path('BgPredictBgBundle_homepage') }}">Health Monitoring</a>{% endblock %}</h2>
                    <h3>{% block blog_tagline %}<a href="{{ path('BgPredictBgBundle_homepage') }}">Improve your health</a>{% endblock %}</h3>
                </hgroup>

            </header>
            <div class="maincontent">
                <div class="sidebar">
                    {% block sidebar %}{% endblock %}
                </div>
                <section class="main-col">
                    {% block body %}{% endblock %}
                </section>
            </div>

            <div id="footer">
                {% block footer %}
                    copy right 2014 <a href="https://#/tema">TEMA</a>
                {% endblock %}
            </div>
        </section>

    {% block javascripts %}
        <script type="text/javascript" src="{{ asset('bundles/prebg/js/file.js')}}"></script>
        <script type="text/javascript" src="{{ asset('bundles/prebg/js/jquery-1.6.2.js')}}"></script>
        <script type="text/javascript" src="{{ asset('bundles/prebg/js/jquery-ui-timepicker-addon.js')}}"></script>
        <script type="text/javascript" src="{{ asset('bundles/prebg/js/jquery-ui.js')}}"></script>
        <script type="text/javascript" src="{{ asset('bundles/prebg/js/jquery.ui.datepicker.js')}}"></script>
        <script type="text/javascript" src="{{ asset('bundles/prebg/js/jquery.ui.widget.js')}}"></script>
        <script type="text/javascript" src="{{ asset('bundles/prebg/js/file.js')}}"></script>
        <script type="text/javascript" src="{{ asset('bundles/prebg/js/i18n/*')}}"></script>


        <script type="text/javascript" src="{{ asset('bundles/prebg/js/jquery.ui.core.js')}}"></script>
        <script type="text/javascript" src="{{ asset('bundles/prebg/js/jquery.ui.tabs.js')}}"></script>
    {% endblock %}
    </body>
</html>

以下是我希望显示标签的页面的源代码：

{# src/Pre/BgBundle/Resources/views/Page/management.html.twig #}
{% extends 'PreBgBundle::layout.html.twig' %}

{% block title %}management{% endblock%}

{% block body %}
    <header>
        <h1>Physical activity</h1>
    </header>

    <ul class="tabs">
        <li class="left"><a href="#tab1">tab1</a></li>
        <li class="left"><a href="#tab2">tab2</a></li>
    </ul>
    <div class="tabs_container">
        <div id="tab1" class="blocco-tab">
            {{ 'tab1' }}
        </div>
        <div id="tab2" class="blocco-tab">
            {{ 'tab2' }}
        </div>
    </div>

    <script type=”text/javascript”>
        jQuery(document).ready(function() {
            $(".blocco-tab").hide();
            $("ul.tabs li:first").addClass("active").show();
            $(".blocco-tab:first").show();
            $("ul.tabs li").click(function() {
                $("ul.tabs li").removeClass("active");
                $(this).addClass("active");
                $(".blocco-tab").hide();
                var activeTab = $(this).find("a").attr("href");
                $(activeTab).fadeIn();
                return false;
            });
        });
    </script>

{% endblock %}

提前感谢您的帮助！

symfony2：在页面中创建选项卡

0 个答案: