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.
[button color=”green” size=”big” link=”http://creativealive.com/demo/easytousetabs/index.html” target=”blank” ]View Demo[/button] [button color=”black” size=”big” link=”http://creativealive.com/wp-content/uploads/2013/10/EasyToUseTabs.zip” ]Download Source[/button]
[divider]
Features you will love:
[checklist]Easy to implement in your markup[/checklist]
[checklist]Simple CSS style to customize the layout[/checklist]
[checklist]useful for full one page website[/checklist]
[checklist]Horizontal menu like tabs[/checklist]
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”.[divider]
<!-- 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:
[divider]
/* 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
[divider]
<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 [highlight]CreativeAlive team[/highlight], If you face any problem please write us in comments below
