2

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ú"...

3
  • Donde es que tiene el valor #anchor-1 ese elemento ? o sea le defines un value="#anchor-1". Cuando dices elemento te refieres a un link o es un boton, que tipo de elemento ? el 3 feb. 2016 a las 2:02
  • 1
    O bien falta o bien sobra un #. 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"
    – Alvaro Montoro
    el 3 feb. 2016 a las 2:11
  • Falta el enlace en la página, pero supongo que es a esta pregunta de StackOverflow en inglés
    – Alvaro Montoro
    el 3 feb. 2016 a las 2:14

1 respuesta 1

2

He replicado el código de acuerdo a lo que mencionas y a mi no me dio problema alguno (debajo puedes ver el ejemplo funcional), en cambio sólo logré tener un comportamiento similar al tuyo cuando mi código no estaba en la clausura de JQuery, puede que cuando tu código se ejecuta, el HTML no ha terminado de cargar, por eso que es que que al ejecutar manualmente toma el comportamiento esperado. Me gustaría conocer si tu código está dentro de una clausura de JQuery para la carga del DOM.

Aún así, dejo el código que replique para que puedas tomar como referencia.


En el siguiente código puedes notar la funcionalidad por medio de un <input> en el cual introduces el #tab a activar y al presionar «Enviar» este toma el valor para activar la pestaña por medio de las funciones que Bootstrap nos ofrece en su documentación: JavaScript · Bootstrap:

Nota: Las líneas que comienzan con el código: $log.logger(); pueden ser borradas, sólo son usadas para efecto de depuración.

$(function(){
  /**
   * Sólo para fines de depuración.
   */
  $.fn.logger = function (val) {
    var $this = $(this);
    $this.stop().animate({
    	scrollTop: $this.prop('scrollHeight')
    }, 1000);
    $this.append($('<p>', {text: val}));
  }
  
  var $log = $('#log');
  $('form').on('submit', function(e) {
    $log.logger('===== '+ new Date());
    
    var nameTab = $('#tab-name').val();
    $log.logger('Se registra: '+nameTab);
    
    /**
     * Si no se añade el gato (#) o símbolo numérico,
     * lo añado al principio de la cadena.
     */
    if (!/^#/.test(nameTab)) {
      nameTab = '#'+nameTab;
      $log.logger('Añadido el símbolo numérico (#): '+nameTab);
    }
    
    console.log($(nameTab).data());
    
    $('a[href="'+nameTab+'"]').tab('show');
    $log.logger('Activado: $(\'a[href="'+nameTab+'"]\').tab(\'show\')');
    
    e.preventDefault();
    e.stopPropagation();
  });
});
#log {
  height: 100px;
  overflow-y: scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">

  <form class="col-xs-6 col-sm-6">
    <label for="tab-name">Nombre de la pestaña</label>
    <input type="text" id="tab-name" placeholder="#ejemplo" required />
    <button type="submit">Activar</button>
  </form>
  
  <div class="col-xs-6 col-sm-6">
    <h3>Log</h3>
    <div class="row" id="log"></div>
  </div>
  
</div>

<hr />

<div>

  <!-- Lista de pestañas -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
      <a href="#primera" aria-controls="primera" role="tab" data-toggle="tab">Tab: #primera</a>
    </li>
    <li role="presentation">
      <a href="#segunda" aria-controls="segunda" role="tab" data-toggle="tab">Tab: #segunda</a>
    </li>
    <li role="presentation">
      <a href="#tercera" aria-controls="tercera" role="tab" data-toggle="tab">Tab: #tercera</a>
    </li>
  </ul>

  <!-- Pestañas -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="primera">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum justo vitae urna condimentum aliquet. Nam accumsan ultrices posuere. Maecenas a orci viverra libero dictum efficitur. Proin suscipit nibh lectus, nec elementum est vehicula quis. Praesent euismod, enim ut viverra convallis, nunc nibh accumsan enim, ac mattis eros velit at erat. Integer pretium libero nec rhoncus elementum. Nulla tristique sodales urna nec semper. Morbi sapien turpis, lobortis eu convallis sed, fringilla quis ex. Donec nec placerat enim.</p>
    </div>
    <div role="tabpanel" class="tab-pane" id="segunda">
      <p>Quisque pharetra lorem vel enim iaculis, a pharetra nunc sagittis. Sed at dapibus ante. Duis viverra imperdiet aliquam. Praesent nulla est, venenatis vitae luctus quis, finibus et leo. Nulla dapibus lobortis tempus. Aliquam efficitur vestibulum libero, facilisis finibus augue finibus congue. Sed laoreet vestibulum nisi vitae sodales.</p>
    </div>
    <div role="tabpanel" class="tab-pane" id="tercera">
      <p>Vivamus in sapien ultrices risus imperdiet varius vel in metus. Sed in nisl tincidunt, vehicula augue eu, laoreet elit. Nulla quis nisl augue. Duis at molestie neque. Praesent cursus dui vitae elit mattis, eu pellentesque urna convallis. Praesent lobortis purus eu massa vehicula, sed consequat dolor tempor. Donec at imperdiet lectus, id hendrerit odio. Morbi iaculis est eget nibh imperdiet, nec porttitor turpis condimentum.</p>
    </div>
  </div>

</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.