Переключение панелей вкладок при изменении опции выбора - PullRequest
Новая
       29

Переключение панелей вкладок при изменении опции выбора

0 голосов
/ 24 апреля 2018

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

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

<ul class="nav nav-tabs search-nav-tabs hidden-sm-down">
  <li class="nav-item"><a class="nav-link active" href="#articlesplus" data-toggle="tab">ArticlesPlus</a></li>
  <li class="nav-item"><a class="nav-link" href="#alice" data-toggle="tab">ALICE Catalog</a></li>
  <li class="nav-item"><a class="nav-link" href="#databases" data-toggle="tab">Databases</a></li>
  <li class="nav-item"><a class="nav-link" href="#reserves" data-toggle="tab">Course Reserves</a></li>
  <li class="nav-item"><a class="nav-link" href="#guides" data-toggle="tab">Subject & Course Guides</a></li>
  <li class="nav-item"><a class="nav-link" href="#cdm" data-toggle="tab">Digital Archives</a></li>
</ul>

У меня проблемы с мобильным меню. Для этого используется меню выбора следующим образом: 

<!-- The order/values of the select must match the index of the corresponding tab -->
<form class="search-nav hidden-md-up">
  <div class="form-group row" style="margin-bottom: 8px;">
    <label class="col-4 col-form-label">Search In:</label>
    <div class="col-8 text-right">
      <select id="search-nav-select" class="form-control">
        <option value='0' data-toggle="#articlesplus">ArticlesPlus</option>
        <option value='1' data-toggle="#alice">ALICE Catalog</option>
        <option value='2' data-toggle="#databases">Databases</option>
        <option value='3' data-toggle="#reserves">Course Reserves</option>
        <option value='4' data-toggle="#guides">Subject & Course Guides</option>
        <option value='5' data-toggle="#cdm">Digital Archives</option>
      </select>
    </div>
  </div>
</form>

У первоначального разработчика (я думаю) была идея использовать индексное значение (см. Значение attr) из опций выбора, а затем отобразить содержимое вкладки для связанной панели вкладок.

Это код Jquery, который он оставил, но он не работает. И я не могу обернуть голову вокруг этого. 

/* select tab on select change */
$('#search-nav-select').on('change', function() {
  alert($(this).val());
  $('#search-nav-tabs li a').eq($(this).val()).tab('show');
});

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

Мне просто нужно знать, какой код Jquery мне нужно написать, чтобы это произошло.

1 Ответ

0 голосов
/ 24 апреля 2018

На самом деле скрипт, который у вас не может работать:

  • Сначала $(this).val() возвращает содержимое атрибута value выбранного параметра, а не значение data-toggle

  • Во-вторых: вы не можете восстановить элемент с идентификатором #search-nav-tabs, тогда как это класс элемента .search-nav-tabs, который вы должны использовать

Я сделал кусок кода, который должен работать для вашего использования: 

$('#search-nav-select').on('change', function() {
  var tabID = $(this).find(":selected").data('toggle');
  $('.search-nav-tabs li a[href="' + tabID + '"]').tab('show');
});

Надеюсь, это поможет вам:)

...