jquery - not - tooltip bootstrap css

¿Cómo puedo preactivar un botón en el grupo btn de Bootstrap?

Question

¿Cómo puedo desplegar el grupo de botones de radio y hacer que uno de los botones esté preconectado?

Tengo un grupo de botones de radio con valores de días de semanas. Éste:

<div class="btn-group" data-toggle="buttons-radio">
  <button class="btn" id="test0">Mon</button>
  <button class="btn" id="test1">Tue</button>
  <button class="btn" id="test2">Wed</button>
  <button class="btn" id="test3">Thu</button>
  <button class="btn" id="test4">Fri</button>
  <button class="btn" id="test5">Sat</button>
  <button class="btn" id="test6">Sun</button>
</div>

Lo que necesito es obtener el valor del día actual (usando var currentDay = new Date().getDay() ) y toggle (activar) el botón correspondiente en el grupo.

Y estoy tratando de alternar con el próximo código (solo para fines de prueba):

$("#test0").button(''toggle'')

Esto no está funcionando.

Answer 1

Encontré el mismo problema pero quería una solución más simple. Me he dado cuenta de que agregar "activo" a la clase no resuelve el problema, ya que se elimina de alguna manera (no he investigado por qué lo hace).

La solución es agregar "activo activo" a la clase. De esta forma, solo uno se elimina y el otro pasa por alto la magia que está sucediendo detrás. Es una solución realmente sucia, pero resuelve el problema. ¡Espero eso ayude!

Answer 2

Intenté lo anterior pero solo quería una solución de HTML / CSS.

Encontré que un enfoque basado en enfoque funcionaría para Bootstrap 3. Tenga en cuenta que el enfoque automático es un atributo HTML5 .

<div class="btn-group">
      <button class="btn" id="test0" autofocus="true">Mon</button>
      <button class="btn" id="test1">Tue</button>
      <button class="btn" id="test2">Wed</button>
      <button class="btn" id="test3">Thu</button>
      <button class="btn" id="test4">Fri</button>
      <button class="btn" id="test5">Sat</button>
      <button class="btn" id="test6">Sun</button>
</div>

Me parece que Bootply es más fácil para los violines con Bootstrap.
Aquí está mi bootply de prueba: http://www.bootply.com/cSntVlPZtU

Answer 3

Puede aprovechar la clase bootstraps .btn.active y simplemente agregarla al botón que desea alternar primero y puede usar jQuerys toggleClass para alternar los botones. Demo

Recién noté que Twitter tiene un script de botón que puede llamar para este efecto, aquí hay una demo fija con los resultados que esperaba.

Después de ver lo que realmente quería del comentario, actualicé mi violín con los resultados que está buscando.

getDay una función que saca el día actual utilizando el método getDay javascripts de una matriz y alterna el día correspondiente en el grupo de botones al apuntar la identificación del botón: demo

Código relevante:

JS

function today() {
    var arr = ["0", "1", "2", "3", "4", "5", "6"]; //first day of the week is sunday and its index is 0
    var currentDay = new Date().getDay();

    return (arr[currentDay]);
}

var day = ''[id="test'' + today() +''"]''; // we take the current day from the array and add the beginning of the class name and save it in a variable

$(day).button(''toggle'');

Answer 4

solo haz clic en la carga de la página para hacer clic en el botón

$ ("# buttonid"). trigger ("clic");

Funcionó para mí para otro botón estándar similar que quería mostrar como haber hecho clic en la carga de la página: la acción del botón era necesaria para configurar la vista de tabla predeterminada de la página que quería mostrar. Otros botones proporcionan diferentes vistas, pero el predeterminado muestra todos los datos.