Нужно заменить Tab UI на select/option

Guyri

Постоялец
Регистрация
9 Апр 2009
Сообщения
41
Реакции
12
Форумчане выручайте.
Имеем элемент вывод информации при помощи табов(кусочег кода из бустрапа)
Код:
    <div class="bs-docs-example">
        <ul id="myTab" class="nav nav-pills" style="margin-bottom: 0;">
            <li>
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Тип<b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#dropdown1" data-toggle="tab">Календарь 1</a></li>
                    <li><a href="#dropdown2" data-toggle="tab">Календарь 2</a></li>
                    <li><a href="#dropdown3" data-toggle="tab">Календарь 3</a></li>
                </ul>
            </li>
        </ul>
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade in active" id="dropdown1">
                <div id="calendari_3"></div>
            </div>
            <div class="tab-pane fade" id="dropdown2">
                <div id="calendari_1"></div>
            </div>
            <div class="tab-pane fade" id="dropdown3">
                <div id="calendari_2"></div>
            </div>
        </di

Мне же нужно сделать это как в режиме option
Код:
            <select>
              <option>Календарь 1</option>
                <option>Календарь 2</option>
                <option>Календарь 3</option>
            </select>

Т.е. выбрав название нужного выбранного элемента(его название), оно оставалась как актив, и менялась при выборе следующего, а сл уже оставалось тоже активным ибо выбрано.

Прошу помочь где копать, или же где почитать, так как примерно не понимаю что ввести в том же гугле фразу для поиска.
Заранее буду благодарен.

Ну или уж если совсем все туго, дайте пример кода покапать, ибо не понимаю как сотворить так, чтобы выбранный элемент в табе оставался активным при функционале dropdown(т.е. выше по позициям)
 
Понимаю, что ответ поздновато пришел, но вдруг кому-то понадобится. Есть вот такой вариант - Для просмотра ссылки Войди или Зарегистрируйся : ul автоматически заменяется на select через jQuery

PHP:
$(function() {
    var $select = $('<select id="mySelect"></select>');
    var count = 0;
    $('ul.nav li a').each(function() {
      $select.append('<option value="' + (count++) + '">' + $(this).text() + '</option>');
    });
 
    $('.nav').before($select).hide();
  });
 
$('#mySelect').on('change', function (e) {
    $('#myTab li a').eq($(this).val()).tab('show');
});
 
Назад
Сверху