Question

我想从引导程序的下拉列表中选择一个选项并激活一个选项卡。有没有人知道它是否可以在没有使用jquery的情况下工作？

如果它不起作用我认为我必须抓住onchange事件并采取选择的值？！

<div class="form-group">
  <label for="sel1">Select list:</label>
  <select class="form-control" id="sel1">
   <option>1</option>
   <option>2</option>
   <option>3</option>
   <option>4</option>
 </select>
</div>

Answer 1

标签。（“show”）功能与标签一起使用。他使用标签的href来显示正确的标签。

我认为有两种不同的解决方案：

您可以在ul中添加css字符串“Display：none”。这样JS代码是相同的，你没有看到导航标签。
1. 您可以更改js代码以直接显示选项卡。

$('#Select').on('change', function (e) {
    $('.tab-pane').hide();
    $('.tab-pane').eq($(this).val()).show(); 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<form>
    <select id='Select'>
        <option value='0'>Tab1</option>
        <option value='1'>Tab2</option>
        <option value='2'>Tab3</option>
        <option value='3'>Tab4</option>
    </select>
</form>

<div class="tab-content">
    <div class="tab-pane active" id="Tab1">Home content</div>
    <div class="tab-pane" id="Tab2">Profile content</div>
    <div class="tab-pane" id="Tab3">Messages content</div>
    <div class="tab-pane" id="Tab4">Settings content</div>
</div>

Answer 2

你应该使用jQuery来做到这一点。

＆＃13;

$('#Select').on('change', function (e) {
    $('#Tab li a').eq($(this).val()).tab('show'); 
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<form>
    <select id='Select'>
        <option value='0'>Tab1</option>
        <option value='1'>Tab2</option>
        <option value='2'>Tab3</option>
        <option value='3'>Tab4</option>
    </select>
</form>
<ul class="nav nav-tabs" id="Tab">
    <li class="active"><a href="#Tab1">Tab1</a></li>
    <li><a href="#Tab2">Tab2</a></li>
    <li><a href="#Tab3">Tab3</a></li>
    <li><a href="#Tab4">Tab4</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="Tab1">Home content</div>
    <div class="tab-pane" id="Tab2">Profile content</div>
    <div class="tab-pane" id="Tab3">Messages content</div>
    <div class="tab-pane" id="Tab4">Settings content</div>
</div>

＆＃13;

bootstrap下拉列表 - 打开选项卡

2 个答案: