Hola:
Seguimos a vueltas con Symfony xD.
Hoy mi duda viene por lo siguiente, estoy intentado hacer un menu con varios archor links que irían a unas nav tabs.
En el menú están así:
<a href="{{ path('editBackend',{'entidad':'empresa','objeto': 1}) }}#seccion1">Sección 1</a> <a href="{{ path('editBackend',{'entidad':'empresa','objeto': 1}) }}#seccion1">Sección 2</a> <a href="{{ path('editBackend',{'entidad':'empresa','objeto': 1}) }}#seccion1">Sección 3</a>
Y estas son las nav:
<ul class="nav nav-tabs"> <li><a href="#seccion1" data-toggle="tab">Seccion1</a></li> <li><a href="#seccion2" data-toggle="tab">Seccion2</a></li> <li><a href="#seccion3" data-toggle="tab">Seccion3</a></li> </ul> <div id="Seccion1" class="tab-pane"></div> <div id="Seccion1" class="tab-pane"></div> <div id="Seccion1" class="tab-pane"></div>
El menú y las nav están en archivos diferentes. Y no me funciona, seguro que la solución es evidete, pero no la veo.
Saludos
Respuestas
Aunque no lo dices, creo que estás usando Bootstrap para diseñar la página. En ese caso, creo que el error que se te está produciendo no tiene que ver directamente con Twig.
Lo primero que comprobaría es si el archivo JavaScript de Bootstrap está bien cargado, ya que si no, no te van a funcionar las pestañas de contenidos. Lo segundo sería quitar las URL completas de los enlaces del menú; es decir, quitar todo lo del {{ path(...) }} relacionado con Twig.
Si quieres ver un ejemplo real de aplicación que usa Twig y Bootstrap para crear este tipo de menú, puedes visitar dx.symfony.com y puedes ver su código fuente en github.com/sensiolabs/dx.symfony.com. El código completo de la plantilla lo puedes ver aquí.
@javiereguiluz
Si estoy usando bootstrap, las pestañas funcionan, prove a crear los anchor asi, pero no funciona voy a echarle un vistazo, gracias por la ayuda
@TsubasaAkai
El único error que veo en tu código HTML es que en el menú estás usando el mismo valor para el atributo id de las tres pestañas (seccion1). Deberías utilizar valores diferentes:
<a href="{{ path('editBackend',{'entidad':'empresa','objeto': 1}) }}#seccion1">Sección 1</a> <a href="{{ path('editBackend',{'entidad':'empresa','objeto': 1}) }}#seccion2">Sección 2</a> <a href="{{ path('editBackend',{'entidad':'empresa','objeto': 1}) }}#seccion3">Sección 3</a>
Por otra parte, hay un par de detalles que podrías mejorar en el código HTML de tu página. Primero, los .tab-pane se suelen encerrar dentro de un elemento .tab-content:
<div class="tab-content"> <div id="Seccion1" class="tab-pane"></div> <div id="Seccion1" class="tab-pane"></div> <div id="Seccion1" class="tab-pane"></div> </div>
Segundo, suele ser recomendado indicar cuál es la pestaña activa cuando no se selecciona ninguna. Para eso puedes usar la clase .active:
<ul class="nav nav-tabs"> <li><a href="#seccion1" data-toggle="tab" class="active">Seccion1</a></li> <li><a href="#seccion2" data-toggle="tab">Seccion2</a></li> <li><a href="#seccion3" data-toggle="tab">Seccion3</a></li> </ul> <div class="tab-content"> <div id="Seccion1" class="tab-pane active"></div> <div id="Seccion1" class="tab-pane"></div> <div id="Seccion1" class="tab-pane"></div> </div>
@javiereguiluz