Javascript 如何使用切换Twitter引导选项卡窗格？

需要使用“选择”切换选项卡。最佳做法是什么？我的想法是通过onChange事件操纵class.active。但我相信一定有更好的办法

下面是一些代码示例：

<select id="mySelect">
<option value="tab1">Tab 1</option>
<option value="tab2">Tab 2</option>
<option value="tab3">Tab 3</option>
</select>

<div id="myTabContent" class="tab-content">
  <div class="tab-pane fade in active" id="tab1">
    <div id="calendari_3">asd</div>
  </div>
  <div class="tab-pane fade" id="tab2">
    <div id="calendari_1">qwe</div>
  </div>
  <div class="tab-pane fade" id="tab3">
    <div id="calendari_2">asw</div>
  </div>
</div>

---

我想在任何情况下，你都可以自己称之为“展示”方法

[更新]

JS:

HTML:

---

接受的答案将适用于一组选项卡。如果需要使用不同的选择框触发多组选项卡，请使用以下js：

$('.select-nav').on('change', function(e) {
    var id = $(this).val();
    $('a[href="' + id + '"]').tab('show');
});

---

谢谢你给这个弗洛·谢尔德·鲍比的灵感

我需要一个解决方案来处理页面上的多个选项卡，没有其他解决方案适合我。所以我很快做了这个：

$document.readyfunction{ //设置索引计数器 var i=0； //转换所有.nav制表符，包含类的除外。保留制表符 $'。导航选项卡：不。保留选项卡。每个功能{ //初始变量 var$select， c=0， $select=$； //将唯一类添加到导航选项卡，使每个选择独立工作 $this.addClass'nav-tabs-index-'+i； //循环遍历每个，将每个构建到一个，从a href获取文本 $this.children'li.每个函数{ $select.append+$this.text+； C++； }; //在上面插入新内容 $this。在$select之前； //增加索引计数器 我++ }; //论变元 $'[class^=mobile nav tabs]'。在“更改”上，函数e{ //从所选选项获取索引 classArray=$this.attr'class'.split； tabIndexArray=classArray[0]。拆分移动导航选项卡- tabIndex=tabIndexArray[1]； //使用boostrap选项卡，显示所选选项选项卡 $'.nav tabs index-'+tabIndex+'li a'.eq$this.val.tab'show'； }; }; 可以在此处查看JS小提琴：

---

这里有一个解决方案，您不需要保留链接。只是选择

$('#mySelect').on('change', function (e) {
  var $optionSelected = $("option:selected", this);
  $optionSelected.tab('show')
});



<select class="form-control" id="mySelect">
    <option data-target="#home">Home</option>
    <option data-target="#profile">Profile</option>
    <option data-target="#messages">Messages</option>
    <option data-target="#messages">Settings</option>
</select>        


<div class="tab-content">
  <div class="tab-pane active" id="home">
    Home
  </div>
  <div class="tab-pane" id="profile">.
    Profile
  </div>
  <div class="tab-pane" id="messages">
    Messages
  </div>
  <div class="tab-pane" id="settings">
    Settings
  </div>
</div>

---

谢谢你的回复。我发现Nathan Hiemstra提供的是最简单的一个，并且易于遵循和实现

然而，我注意到它以一种一劳永逸的方式工作。我的意思是，一旦您选择了一个选项并激活了其相应的面板，并在所有面板之间循环，您将注意到面板至少在bootstrap 4.6中停止切换。*

经过一番挖掘，我发现.tab'show'方法向select的option元素添加了一个活动类。这是有意义的，因为我想这是用来与导航标签是活跃的一次1

无论如何，我的简单修复不知道它是否有任何副作用，但似乎是在调用选项元素call.removeClass.active上的.tab'show'之后起作用的。我想所选的选项无论如何都是活动选项，所以为什么要使用这个类。但是，这就决定了一个人和一个人之间的区别，以及永远的工作

希望这个小小的修改能有所帮助

---

亲切的问候…

Aha不明白你不再想要ul了，当然你可以隐藏它！Forked：用jQuery自动地将ul替换为select-好的，很有趣，但是为什么不先替换DOM结构呢？我不认为一开始就需要这样，不是吗？只是为了清楚：你需要UL/LI的东西，这样引导标签api才能正常工作。因此，包括它并添加显示：无以隐藏它。我试着只用“选择”和“选项卡”窗格就可以了，但功能不正常。欢迎光临！但是，您需要精确地将id作为不同选项的值：更新的JSFIDLE:@Flo Schield Bobby如果您使用id，您将无法影响多个选择框。我不确定是否理解，您可以更新JSFIDLE吗？@Flo Schield Bobby我只是说它没有模块化，如果使用id，则需要指定每个变量，但在您的示例中，哪个值将包含id变量？

$('.select-nav').on('change', function(e) {
    var id = $(this).val();
    $('a[href="' + id + '"]').tab('show');
});

$('#mySelect').on('change', function (e) {
  var $optionSelected = $("option:selected", this);
  $optionSelected.tab('show')
});



<select class="form-control" id="mySelect">
    <option data-target="#home">Home</option>
    <option data-target="#profile">Profile</option>
    <option data-target="#messages">Messages</option>
    <option data-target="#messages">Settings</option>
</select>        


<div class="tab-content">
  <div class="tab-pane active" id="home">
    Home
  </div>
  <div class="tab-pane" id="profile">.
    Profile
  </div>
  <div class="tab-pane" id="messages">
    Messages
  </div>
  <div class="tab-pane" id="settings">
    Settings
  </div>
</div>