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

как я могу развернуть группу переключателей и сделать одну из кнопок предварительно включать?

у меня есть группа радио-кнопок со значениями дней недели. Вот этот:

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

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

4 69
jquery twitter-bootstrap

4 ответа:

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

просто заметил, что twitter имеет скрипт кнопки, который вы можете вызвать для этого эффекта, вот фиксированный демо С результатами, которые вы ожидали.

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

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

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

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

Я пробовал выше, но хотел только решение 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

23

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

$("#buttonid").триггер("клик");

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

2

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

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

1