Easytouse Tabs is a simple, right graceful script for tab and especially with a short script for tabbing system, It’s very easy to implement JavaScript tabs and more decorative visual transition that pass strict tab to tab. The result is a short and simple to manage tabs with jQuery.

Features you will love:

Easy to implement in your markup

Simple CSS style to customize the layout

useful for full one page website

Horizontal menu like tabs

The Markup of HTML

The Html markup structure consists of tabs and content for all tabs handles a global container (id ” tab”), which oversees two main elements: The tabs, for which we use a list of “ul”, container and content boxes with a tag “div”.

<!-- easy tabs --> <div class="easytabs"> <ul class="tabs"> <li><a href="#tab1">Easy Tab 1</a></li> <li><a href="#tab2">Easy Tab 2</a></li> <li><a href="#tab3">Easy Tab 3</a></li> </ul> <!-- top tab container --> <div class="tab_container"> <!-- tab1 --> <div id="tab1" class="tab_content"> Your content here </div> <!-- /tab1 --> <!-- tab2 --> <div id="tab2" class="tab_content"> Your content here </div> <!-- /tab2 --> <!-- tab2 --> <div id="tab3" class="tab_content"> Your content here </div> <!-- /tab2 --> </div> <!-- /top tab container --> </div> <!-- /easy tabs -->

The CSS Style

Clean and clear style is below, you can easily customize it:

/* easy tabs css */ .easytabs { width: 850px; height: auto; float: left; text-transform: capitalize; margin-bottom: 20px; } .easytabs ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: auto; border-bottom: 1px solid #06F; width: 850px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; } .easytabs ul.tabs li { float: left; margin: 0; padding: 0; height: auto; width: auto; margin-right: 3px; margin-top: 1px; margin-bottom: -1px; overflow: hidden; position: relative; background: #fff url(../images/tab_inactive_bg.png) bottom left repeat-x; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; text-align: center; border-top: 1px solid #c2c2c2; border-left: 1px solid #c2c2c2; border-right: 1px solid #c2c2c2; border-bottom: 1px solid #06F; } .easytabs ul.tabs li a { text-decoration: none; color: #222; display: block; padding: 8px 16px; outline: none; text-align: center; font-size: 14px; line-height: 18px; text-transform: uppercase; } .easytabs ul.tabs li.active { background: #06F; border: 1px solid #06F; } .easytabs ul.tabs li.active a { font-weight: bold; color: #fff; } .easytabs .tab_container { overflow: hidden; clear: both; float: left; width: 808px; background: #fff; overflow: auto; height: auto; line-height: 16px; padding: 20px; border-bottom: 1px solid #06F; border-left: 1px solid #06F; border-right: 1px solid #06F; } .easytabs .tab_content { width: 100%; height: auto; float: left; }

The JavaScript

Simple and easy to understand

<script type="text/javascript"> $( document ).ready(function() { // search ui tabs $(document).ready(function() { //When page loads... $(".tab_content").hide(); //Hide all content $("ul.tabs li:first").addClass("active").show(); //Activate first tab $(".tab_content:first").show(); //Show first tab content //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab $(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content $(activeTab).show(); //Fade in the active ID content return false; }); }); }); </script>

Easytouse Tabs is created by CreativeAlive team, If you face any problem please write us in comments below