引导4-使用<select>而不是制表符(<li>)

Question

是否可以将引导选项卡的外观更改为下拉选择，而不是用<ul>和<li>制作的标准选项卡？

我有一个相对较小的区域(比如col-3)，我需要用很多选项卡来显示选项卡(比如7-10选项卡)，但是它在小屏幕上看起来很难看，因为它跨越了3-4行。

我想使用select下拉列表(可能是一些用于slecet的jquery加载项)，在这里，我总是使用下拉列表来选择选项卡。

它需要是<select>，因为我想显示所有的时间选择选项卡(标准的引导下拉，不要这样做，它只是提供选项，但没有显示什么是被选择的)。

Answer 1

您可能需要隐藏<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:

      }
    }

这里是摇摆不定的人