Simple Tabs is a light-weight navigation widget, built with css, html, and jQuery. Feel free to use this in your next web project. Simple Tabs is free for personal and commercial use. No attribution required!
Link to the simple tabs script at the bottom of your project. Make sure you have the latest version of jQuery also included.
<!--Call the most recent version of jQuery with Simple Tabs-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="js/simple-tabs.js"></script>
</body>
Simple Tabs uses data attributes as the basis for its functionality. Each tab is bound to its own content area by using an identical data attribute identifier.
<!--List items are bound to tab content by data attribute-->
<nav class="tabs-nav">
<ul>
<li data-tab="1">TAB 1</span></li>
<li data-tab="2">TAB 2</span></li>
<li data-tab="3">TAB 3</span></li>
</ul >
</nav>
<!--Each content section corresponds with it's matching data attribute-->
<div class="tab-content" data-tab="1">
<h2>TAB 1</h2>
<p>Content goes here.</p>
</div>
<div class="tab-content" data-tab="2">
<h2>TAB 2</h2>
<p>Content goes here.</p>
</div>
<div class="tab-content" data-tab="3">
<h2>TAB 3</h2>
<p>Content goes here.</p>
</div>