选择选项更改时切换选项卡窗格

Question

我有两种不同的菜单向用户显示搜索菜单，一种显示在中型到大型显示器上，一种仅在移动设备上显示。

对于大中型显示器，用户可以使用选项卡在他们想要搜索的不同资源之间切换

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

移动菜单是我遇到的问题。对于这个 select 菜单，如下所示：

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

最初的开发者（我认为）有使用 select 选项中基于索引的值（参见值 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');
});

基本上，当 select 菜单选项更改时，它应该显示 resource/collection 的相应搜索菜单。

我只需要知道我需要编写什么 Jquery 代码才能实现这一点。

Answer 1

实际上您的脚本无法运行：

首先，$(this).val() return 所选选项的 value 属性的内容不是 data-toggle
[=29 的值=]
其次：您无法恢复 ID 为 #search-nav-tabs 的元素，而您应该使用 .search-nav-tabs 元素的 class[=16] =]

我编写了一段代码，应该可以供您使用：

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

希望对您有所帮助:)

选择选项更改时切换选项卡窗格

Switching tab panes on selection option change

html

jquery

tabs

menu

nav