Как я могу предварительно переключить кнопку в Bootstrap btn-group?

Как я могу развернуть группу Radio Button и сделать одну из кнопок, предварительно переключенных?

У меня есть группа кнопок с днями недели. Это:

<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>

Мне нужно получить текущее значение дня (используя var currentDay = new Date().getDay()) и toggle (активировать) соответствующую кнопку в группе.

И я пытаюсь переключить его со следующим кодом (только в целях тестирования):

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

Это не работает.

Ответы

Ответ 1

Вы можете использовать класс bootstraps .btn.active и просто добавить его к кнопке, которую хотите перенести, и вы можете использовать jQuerys toggleClass, чтобы развязать кнопок. Демо.

Только что заметил, что твиттер имеет кнопку script, которую вы можете вызвать для этого эффекта, вот фиксированная демонстрация с ожидаемыми результатами.

Посмотрев на то, что вы действительно хотели от комментария, я обновил свою скрипку с результатами, которые вы ищете.

Я добавил функцию, которая тянет текущий день с помощью метода javascripts getDay из массива и переключает соответствующий день в группе кнопок, задавая идентификатор кнопки: demo

Соответствующий код:

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');

Ответ 2

Я попробовал это, но хотел только HTML/CSS-решение.

Я нашел, что фокус-подход будет работать для Bootstrap 3. Обратите внимание, что автофокус является атрибутом 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>

Я нахожу Bootply легче для скриптов с Bootstrap.
Вот мой тест bootply: http://www.bootply.com/cSntVlPZtU

Ответ 3

Я столкнулся с той же проблемой, но хотел получить более простое решение. Я заметил, что добавление "активного" в класс не решает проблему, поскольку оно как-то удалено (я не исследовал, почему он это делает).

Решение добавляет к классу "активный активный". Таким образом, только один удаляется, а другой обходит магию, которая происходит позади. Это действительно грязное решение, но оно решает проблему. Надеюсь, это поможет!

Ответ 4

просто олицетворяйте нажатие кнопки на загрузку страницы:

$( "# buttonid" ) триггер ("click").

Работала для меня на другой аналогичной стандартной кнопке, которую я хотел показать, поскольку нажимал на загрузку страницы - действие кнопки было необходимо для установки отображения таблицы по умолчанию, которое я хотел отобразить. Другие кнопки предоставляют разные виды, но по умолчанию отображаются все данные.