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>

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

<!-- 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代码。

Answer 1

实际上你拥有的脚本无法工作：

首先，$(this).val()返回所选选项的value属性的内容，而不是data-toggle的值
其次：您无法恢复ID为#search-nav-tabs的元素，而它应该是您应该使用的元素.search-nav-tabs的类
< / LI>

我制作了一段适合您使用的代码：

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

希望这可以帮助你：）

切换选项选项上的标签窗格更改

1 个答案: