JSFiddle - React, Tailwind, and code Playground

by sinetheta

HTML

<p>Select 4.1, then select any other tab. e.relatedTarget will always point to 4.2
<div class="tab-example">
    <ul class="nav nav-tabs">
      <li><a href="#1" data-toggle="tab">1</a></li>
      <li><a href="#2" data-toggle="tab">2</a></li>
      <li><a href="#3" data-toggle="tab">3</a></li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">4 <b class="caret"></b></a>
          <ul class="dropdown-menu">
              <li><a href="#41" data-toggle="tab">4-1</a></li>
              <li><a href="#42" data-toggle="tab">4-2</a></li>
          </ul>
        </li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane active" id="1">1</div>
      <div class="tab-pane" id="2">2</div>
      <div class="tab-pane" id="3">3</div>
      <div class="tab-pane" id="41">4-1</div>
      <div class="tab-pane" id="42">4-2</div>
    </div>
</div>
<div id="targets"></div>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>

CSS

/* Code examples
-------------------------------------------------- */

/* Base class */
.tab-example {
  position: relative;
  margin: 15px 0;
  padding: 39px 19px 14px;
  *padding-top: 19px;
  background-color: #fff;
  border: 1px solid #ddd;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

/* Echo out a label for the example */
.tab-example:after {
  content: "Example";
  position: absolute;
  top: -1px;
  left: -1px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: bold;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  color: #9da0a4;
  -webkit-border-radius: 4px 0 4px 0;
     -moz-border-radius: 4px 0 4px 0;
          border-radius: 4px 0 4px 0;
}

/* Remove spacing between an example and it's code */
.tab-example + .prettyprint {
  margin-top: -20px;
  padding-top: 15px;
}

JavaScript

$('a[data-toggle="tab"]').on('shown', function (e) { 
    $('#targets').empty()
        // activated tab
        .append('<p>target = ' + e.target.hash)
        // previous tab
        .append('<p>previous target = ' + (e.relatedTarget? e.relatedTarget.hash: ''));
});