Question

当我在Bootstrap的select-option中选择相关选项时，如何刷新选项卡内容？默认模式是使用li.nav-items选择标签内容。

＆＃13;

<form>
  <select class="form-control" id="">
    <option value="0">Home</option>
    <option value="1">Products</option>
  </select>
</form>

<section class="tab-content">
  <div class="tab-pane show active" id="home" role="tabpanel" aria-labelledby="home">Home Text</div>
  <div class="tab-pane" id="products" role="tabpanel" aria-labelledby="products">Products Text</div>
</section>

＆＃13;

Answer 1

希望这会对你有所帮助。

＆＃13;

$('#mySelect').on('change', function (e) {
    $('#myTab 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.10.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<form>
    <select id='mySelect'>
        <option value="0">Home</option>
        <option value="1">Products</option>
    </select>
</form>
<ul class="nav nav-tabs" id="myTab" style="display:none">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#products">Products</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="home">Home Text</div>
    <div class="tab-pane" id="products">Products Text</div>
</div>

＆＃13;

Answer 2

您可以使用解决方案

$('select').change(function(){
  $('.tab-pane').removeClass('active');
  $('.tab-content div:nth-child(' + (parseInt($(this).find('option:selected').attr('value')) + 1 ) + ')').addClass('active');
});

.tab-pane {
  display: none;
}

.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select class="form-control" id="">
    <option value="0">Home</option>
    <option value="1">Products</option>
  </select>
</form>

<section class="tab-content">
  <div class="tab-pane show active" id="home" role="tabpanel" aria-labelledby="home">Home Text</div>
  <div class="tab-pane" id="products" role="tabpanel" aria-labelledby="products">Products Text</div>
</section>

希望这对你有所帮助。

将标签内容加载到bootstrap中的select选项？

2 个答案: