html 从select中打开/更改引导选项卡

Posted 2021-05-11

$('#js-tablist').on('change', function (e) {
  $('#js-tabs li a').eq($(this).val()).tab('show'); 
});


// Otra alternativa más 'limpia' que se podría explorar
$('.select-nav').on('change', function(e) {
  var id = $(this).val();
  $('a[href="' + id + '"]').tab('show');
});

<select id='js-tablist'>
  <option value='0'>Home</option>
  <option value='1'>Profile</option>
  <option value='2'>Messages</option>
</select>

<ul class="nav nav-tabs" id="js-tabs">
  <li class="active"><a href="#home">Home</a></li>
  <li><a href="#profile">Profile</a></li>
  <li><a href="#messages">Messages</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="home">Home content</div>
  ...
</div>