javascript - 引导程序 4 - 使用<select>而不是 tabs () 是否可以将引导选项卡的外观更改为下拉选择，而不是使用 <ul> 和 <li> 制作的标准选项卡我有相对较小的区域（如 col-3），我需要在其中显示很多选项卡标签（如 7-10 个标签），但在小屏幕上看起来很难看，因为它跨越 3-4 行。我想使用选择下拉菜单（可能是一些用于 slecet 的 jquery 插件），我总是使用该下拉菜单来选择选项卡。它需要是 <select> 因为我想显示所有时间选择的选项卡（

首页 > 解决方案 > 引导程序 4 - 使用而不是 tabs () 是否可以将引导选项卡的外观更改为下拉选择，而不是使用 <ul> 和 <li> 制作的标准选项卡我有相对较小的区域（如 col-3），我需要在其中显示很多选项卡标签（如 7-10 个标签），但在小屏幕上看起来很难看，因为它跨越 3-4 行。我想使用选择下拉菜单（可能是一些用于 slecet 的 jquery 插件），我总是使用该下拉菜单来选择选项卡。它需要是 <select> 因为我想显示所有时间选择的选项卡（

问题描述

标签： javascripthtmljquerycssbootstrap-4

解决方案

您可能想隐藏<ul>并<li>触发它们<select>

这是一个例子：

<ul class="nav nav-tabs">
  <li hidden><a href="#" id="a1">Menu 1</a></li>
  <li hidden><a href="#" id="a2">Menu 2</a></li>
  <li hidden><a href="#" id="a3">Menu 3</a></li>
</ul>

<select onchange="selectTab(this.value)">
  <option value="1">Menu 1</option>
  <option value="2">Menu 2</option>
  <option value="3">Menu 3</option>
</select>

和示例 JavaScript：

    function selectTab(e){
      switch(e){
        case 1:
            $('#a1').click();
        break;
        case 2:
            $('#a2').click();
        break;
        case 3:
            $('#a3').click();
        break;
        default:

      }
    }

这是jsfiddle

问题描述

解决方案

推荐阅读