You are here: Home / Coding / Easy to use jQuery Tabs CSS & jQuery
Easy to use jQuery Tabs CSS & jQuery

Easy to use jQuery Tabs CSS & jQuery

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.

View Demo   Download Source

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

About Creative Alive Staff

Creative alive staff is here to write about latest trendy web designing and development tips and techniques which are used to produce a good brand or product in market. We are energetic and having zeal knowledge of simple tutorials, time-saving methods. Hope we will help you to make web better and alive enough. Lets spread some creativity out there... Cheers!!!

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Scroll To Top