Simple data-attribute driven tabbed content

Originally from https://toddmotto.com/labs/data-tabs/

by Cam Gould

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="tabs">
  <a href="#" data-tab="1" class="tab active">Tab 1</a>
  <a href="#" data-tab="2" class="tab">Tab 2</a>
  <a href="#" data-tab="3" class="tab">Tab 3</a>
  <a href="#" data-tab="4" class="tab">Tab 4</a>
  <a href="#" data-tab="5" class="tab">Tab 5</a>
  <a href="#" data-tab="6" class="tab">Tab 6</a>
  <a href="#" data-tab="7" class="tab">Tab 7</a>
  
  <div data-content="1" class="content active">Tab 1 Content</div>
  <div data-content="2" class="content">Tab 2 Content</div>
  <div data-content="3" class="content">Tab 3 Content</div>
  <div data-content="4" class="content">Tab 4 Content</div>
  <div data-content="5" class="content">Tab 5 Content</div>
  <div data-content="6" class="content">Tab 6 Content</div>
  <div data-content="7" class="content">Tab 7 Content</div>
</div>

CSS

* {
  font-family: sans-serif;
}
.tab {
    float: left;
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px 5px 0 0;
    background: #F9F9F9;
    color: #777;
}

.tab.active, .tab:hover {
    background: #DDD;
    color: #222;
}

.content {
    display: none;
    clear: both;
    background: #FFF;
    padding: 20px;
}

.content.active {
    display: block;
}

JavaScript

$('[data-tab]').on('click', function (e) {
  $(this).addClass('active').siblings('[data-tab]').removeClass('active')
  $(this).siblings('[data-content=' + $(this).data('tab') + ']').addClass('active').siblings('[data-content]').removeClass('active')
  e.preventDefault()
})