<ul class="tabs">
  <li>Tab 1</li>
  <li>Tab 2</li>
  <li class="selected">Tab 3</li>
  <li>Tab 4</li>
  <li>Tab 5</li>
</ul>
<div class="content">
Nunc id purus libero, aliquet sollicitudin risus. Fusce orci nisi, mattis et volutpat ac, varius vitae ligula. Maecenas pretium, ipsum at imperdiet gravida, nunc leo feugiat sem, vel viverra sapien turpis ut nisl. Sed enim quam, rutrum in lobortis eget, posuere sit amet nisl. Aenean ultricies turpis eu erat laoreet dignissim. Vivamus mi dolor, tincidunt a eleifend eu, auctor ac urna. Quisque eget metus quam. Donec interdum varius justo id egestas. Nulla sit amet orci nec arcu lacinia fermentum.
</div>
body {
  color: #333;
  background: #212121;
  font-family: sans-serif;
  padding: 1em;
}

.tabs {
  margin: 0;
  padding: 0;
}

.tabs li {
  display: inline-block;
  padding: 5px 1em 2px;
  background: #ddd;
  border-radius: 8px 8px 0 0;
  border-color: #BB4900;
  border-style: solid solid none solid;
  border-width: 2px;
  vertical-align: bottom;
  color: #444;
  cursor: pointer;
}

.tabs li.selected {
  background: white;
  position: relative;
  border-color: #FF6300;
  padding-bottom: 4px;
  top: 2px;
  color: #333;
}

.content {
  background: white;
  padding: .8em 1em;
  border: solid #FF6300 2px;
}
$(".tabs li").on("click", function() {
  $(".selected").removeClass("selected");
  $(this).addClass("selected");
  
  var $content = $(".content");
    $content.html(_.shuffle($content.html().split(/ /)).join(" "));
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js