JSFiddle - React, Tailwind, and code Playground

by Prajeesh_PR

HTML

<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<script src="https://getbootstrap.com/2.3.2/assets/js/bootstrap-tab.js"></script>
<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>

JavaScript

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