如何使用< select>切换Twitter Bootstrap选项卡窗格<选项&GT ;? [英] How to toggle Twitter Bootstrap tab panes with <select> <option>?

问题描述

需要使用选择切换标签页。最佳做法是什么？我的想法是使用 onChange 事件操作类 .active 。但我相信肯定有更好的东西。

以下是一些代码示例：

 < select id =mySelect> 
< option value =tab1>标签1< / option> 
< option value =tab2>标签2< / option> 
< option value =tab3>标签3< / option> 
< / select> 
 
< div id =myTabContentclass =tab-content> 
< div class =tab-pane fade in activeid =tab1> 
< div id =calendari_3> asd< / div> 
< / div> 
< div class =tab-pane fadeid =tab2> 
< div id =calendari_1> qwe< / div> 
< / div> 
< div class =tab-pane fadeid =tab3> 
< div id =calendari_2> asw< / div> 
< / div> 
< / div> 
  

解决方案

我想你可以自己调用'show'方法，无论如何。

http://jsfiddle.net/7Wv5h/40 / [更新]

JS：

  / / jQuery和Bootstrap已加载，您在$（document）.on（'ready'）范围内！ $（$＃$ b $（'＃your-select'）。on（'change'，function（e）{
 // With $（this）.val（），你可以**（并且必须！ ）**在< option>值中指定目标。
 $（'＃the-tab li a'）。eq（$（this）.val（））。tab（'show'）; 
 //如果你不关心排序，你可以使用$（this）.index（）。
 // $（'＃the-tab li a'）。eq（$（this ）.index（））.tab（'show'）; 
}）; 
  

HTML：

 <形式> 
< select id ='mySelect'> 
< option value ='0'>主页< / option> 
< option value ='1'>个人资料< / option> 
< option value ='2'>消息< / option> 
< option value ='3'>设置< / option> 
< / select> 
< / form> 
< ul class =nav nav-tabsid =myTab> 
< li class =active>< a href =＃home>主页< / a>< / li> 
< li>< a href =＃profile>个人资料< / a>< / li> 
< li>< a href =＃messages>邮件< / a>< / li> 
< li>< a href =＃settings>设置< / a>< / li> 
< / ul> 
< div class =tab-content> 
< div class =tab-pane activeid =home>主页内容< / div> 
< div class =tab-paneid =profile>个人资料内容< / div> 
< div class =tab-paneid =messages>邮件内容< / div> 
< div class =tab-paneid =settings>设置内容< / div> 
< / div> 
  

Need to switch tabs with select. What's the best practice? My idea is to manipulate class .active with onChange event. But I believe there must be something better.

Here's some code sample:

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

解决方案

I guess you can call the 'show' method yourself, on any event.

http://jsfiddle.net/7Wv5h/40/ [updated]

JS:

// jQuery and Bootstrap loaded, you're here on a $(document).on('ready') scope !
$('#your-select').on('change', function (e) {
    // With $(this).val(), you can **(and have to!)** specify the target in your <option> values.
    $('#the-tab li a').eq($(this).val()).tab('show');
    // If you do not care about the sorting, you can work with $(this).index().
    // $('#the-tab li a').eq($(this).index()).tab('show');
});

HTML:

<form>
    <select id='mySelect'>
        <option value='0'>Home</option>
        <option value='1'>Profile</option>
        <option value='2'>Messages</option>
        <option value='3'>Settings</option>
    </select>
</form>
<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#profile">Profile</a></li>
    <li><a href="#messages">Messages</a></li>
    <li><a href="#settings">Settings</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="home">Home content</div>
    <div class="tab-pane" id="profile">Profile content</div>
    <div class="tab-pane" id="messages">Messages content</div>
    <div class="tab-pane" id="settings">Settings content</div>
</div>

这篇关于如何使用< select>切换Twitter Bootstrap选项卡窗格<选项&GT ;?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！