Responsive Metro Style Tabs Plugin For jQuery

A very small jQuery script used to create a responsive, Windows Metro-style tabbed interface with tiled tab navigation links.

How to use it:

1. Create the tab navigation as this:

<ul class="tab-nav">
  <li class="magenta"><a href="#tab1">Tadadb1</a></li>
  <li class="purple"><a href="#tab2">Tab2</a></li>
  <li class="orange"><a href="#tab3">Tab3</a></li>
  <li class="blue"><a href="#tab4">Tab4</a></li>
  <li class="green"><a href="#tab5">Tab5</a></li>
  <li class="lime"><a href="#tab6">Tab6</a></li>
</ul>

2. Style the tab navigation and make the navigation links fully responsive using CSS flexbox.

.tab-nav {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 -5px;
}

.tab-nav li {
  display: inline-block;
  text-align: center;
  flex-grow: 1;
  margin: 0 5px 10px;
}

.tab-nav li:hover { opacity: .95; }

.tab-nav li a {
  padding: 30px;
  display: block;
  text-decoration: none;
  color: white;
}

3. Create the tabbed content:

<div class="content active" id="tab1">
  <h1>Tab 1</h1>
  <p>Tab 1 content</p>
</div>

...

<div class="content active" id="tab6">
  <h1>Tab 6</h1>
  <p>Tab 6 content</p>
</div>

4. Style the tabbed content in the CSS:

.content {
  color: #FFF;
  padding: 25px;
  display: none;
}

.content.active { display: block; }

5. Put the latest version of jQuery library at the bottom of the webpage.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>

6. Activate the tabs interface.

// Give the first class to the first content
var firstClass = $('.tab-nav li:first').attr('class');
$('.content:first').addClass(firstClass);

// Align classes of tabs and contents
$('.tab-nav li').each(function(index, val) {
  var allClass = $(this).attr('class');
  $('.content').eq(index).addClass(allClass);
});

// On click event to change contents
$('.tab-nav li a').on('click', function() {
  var hrefAttr = $(this).attr('href');
  var colorClass = $(this).parent().attr('class');

  $('.content').removeClass('active');
  $(hrefAttr + '.content').attr('id', hrefAttr.slice(1)).addClass('active');

});

---

This awesome jQuery plugin is developed by vitordiniz22. For more Advanced Usages, please check the demo page or visit the official website.