Estoy modificando un tab
de bootstrap
para tener marcado el que necesite al cargarse la página y no soy capaz de hacerlo de manera dinámica.
Por un lado utilizo esta función (tomada de esta web)
function activaTab(tab){
$('.nav-tabs a[href="' + tab + '"]').tab('show');};
Con lo que solo me faltaría pasarle el valor del enlace a mostrar. El problema es que si escribo directamente el texto funciona:
activaTab('anchor-1');
Pero si tomo el valor de un elemento de la página que contiene el valor #anchor-1
no funciona. Lo último que tengo es un input hidden
con el valor.
activaTab($('#enlace-1').val());
Soy bastante novato con el js
así que es probable que sea un error básico ;)
Actualización (03-Feb-2016)
Muchas gracias por contestar, amplío el código porque no me he explicado tan claramente como suponía.
Efectivamente a la función le he quitado el #
pero porque todos los valores que le pasaba ya van con el #
.
El código del tab
es este:
<ul class="nav nav-tabs" id="tab1">
<li {% if tab_anchor == '#pr-val' %} class="active" {% endif %}><a data-toggle="tab" href="#pr-val">Valoración</a></li>
<li {% if tab_anchor == '#pr-sel' %} class="active" {% endif %}><a data-toggle="tab" href="#pr-sel">Selección </a></li>
<li {% if tab_anchor == '#pr-des' %} class="active" {% endif %}><a data-toggle="tab" href="#pr-des">Descarte</a></li>
</ul>
Los if son del gestor de plantillas Twig para tener cargado por defecto la pestaña que tenía previamente(al hacer un insert que vuelva a la que tenía marcada).
<div id="pr-val" class="tab-pane fade active in">
<div id="pr-sel" class="tab-pane fade">
<div id="pr-des" class="tab-pane fade">
Con esto tengo la pestaña que quiero marcada pero el div inferior no se corresponde. Entonces lo que hago es buscar el valor del href activo y mostrar el panel. Al no funcionarme y por asegurar que el fallo no venía de ahí, provisionalmente he incluido un input hidden con el valor del anchor seleccionado que tengo en la sesión para tener el valor directo a través del id anchor.
<input id="anchor" type="hidden" name="anchor" value="{{ tab_anchor }}"/>
Y el código javascript sería este:
$('#tab1 a').click(function (e) {
e.preventDefault()
$(this).tab('show')});
function activaTab(tab){
$('.nav-tabs a[href="' + tab + '"]').tab('show');
};
Aquí es cuando si hago la llamada a través de:
activaTab('#pr-des');
funciona, pero si la hago a través de:
activaTab($('#anchor').val());
no funciona, teniendo la variable anchor el valor "#pr-des".
Como poniendo el id del valor "a mano" funcionaba se me ocurrió hacer un switch
ya que así le podía llamar directamente.
$(document).ready(function(){
switch($('#anchor').val()) {
case '#pr-val':
activaTab('#pr-val');
break;
case '#pr-sel':
activaTab('#pr-sel');
break;
case '#pr-des':
activaTab('#pr-des');
break;
}
//activaTab('#pr-des');
});
Y así tampoco funciona. En cambio si después del switch
, dentro de esa función, des comento el:
activaTab('#pr-des');
y funciona... He probado los cases del switch
y entra al que corresponde.
He probado a hacer un alert
de lo que muestra la función activaTab
y en ambos casos imprime:
.nav-tabs a[href="#pr-des"]
Gracias por echarle un vistazo. Estoy a punto de mandar las tabs
al otro barrio y hacer otro tipo de "menú"...
#
. Si funciona correctamente con "anchor-1" no puede funcionar con "#anchor-1" (o viceversa). Y teóricamente no debería funcionar con "anchor-1" porque el href se supone que será "#anchor-1"