Writing simple tabs with jQuery

Written by pelister. Posted in Jquery

Content organization without messing up the design or layout is really the hardest part of web design. But with recent web development tools – well it is not that hard enough. jQuery and CSS have transformed the web design to new levels in recent years. In this article we will look at the most widely used design element – TABS, almost every site have one, which saves space and presents more content to the user.

We will combine jQuery and CSS to create a simple tab. This jQuery code can be used to include any number of tabs on your site, and with CSS you can customize it to your website design.

First the Code

This is the html part

<ul  id="tabtyp" class="simpletabs" >
	<li><a href="#simp_tab_first">First</a></li>
	<li><a href="#simp_tab_second">Second</a></li>
	<li><a href="#simp_tab_third">Third</a></li>
</ul>

<div id='first' class='tab'>
	<img src="img/7s3.jpg">
	<p>Some Sample content</p>
</div>

<div id='second' class='tab'>
	<img src="img/7s5.jpg">
	<p>Second Tab with some content</p>
</div>

<div id='third' class='tab'>
	<img src="img/7s2.jpg">
	<p>Third Tab with some content</p>
</div>
The CSS code to provide the look and feel for our div and list elements.
#logo
{
	width: 505px;
	margin: 0 auto;
	text-align: center;
}
#pgtitle
{
	margin: 0px 0px 20px;
	font-size: 18pt;
}
#container
{
	width: 260px;
	margin: 0 auto;
}
#tabtyp
{
	height: 12px;
	width: 240px;
	padding: 0px 0px 0px 10px;
}
UL#tabtyp LI
{
	float: left;
	font-size: 12pt;
	display: inline;
	margin-right: 9px;
}
UL#tabtyp LI A
{
	color: #234C89;
	border: 1px solid #B7B7B7;
	-moz-border-radius: 7px 7px 0 0;
	-webkit-border-radius: 10px 10px 0 0;
	border-radius: 10px 10px 0 0;
	padding: 5px 7px 8px;
	background: url(../img/gradback_grey.png);
	text-decoration: none;
}
UL#tabtyp LI A:hover, UL#tabtyp LI A.selected:hover
{
	text-decoration: none;
	background: url(../img/gradhover.png);
}
UL#tabtyp LI A.selected
{
	border-bottom: 2px solid #FFF;
	background: url(../img/gradback_sel.png);
}
#first, #second, #third
{
	padding: 15px 0 0;
	border: 1px solid #AEACAC;
	width: 250px;
	text-align: center;
	background: #EAEAEA;
}

We have three div which will be our content area and these content area will be shown and hidden by clicking the list elements which will act as the tabs.

<a href="#simp_tab_first">First</a>

For example by clicking the list element with the above shown anchor tag will display the first div and hide the rest. So to do that we will write the jQuery part that handles the click event and modifies the css.

 $(document).ready( function( ) {
   $( document ).on( 'click', 'ul.simpletabs li a', function() {
	var ref = $(this).attr( 'href' ).replace( '#', '' ); // 'simp_tab_first'
	var divcl = ref.split('_')[1]; // 'tab'
	var divid = ref.split('_')[2]; // 'first / second...'

	$( 'div.'+divcl ).css( 'display', 'none' ); //hides all the div with the given class
	$( 'div#'+divid ).css( 'display', 'block' ); //shows the div with the given id
	$( 'ul.simpletabs li a').removeClass( 'selected' ); //removes the class selected from tabs( list )
	$( 'ul.simpletabs li a[href="#' + ref + '"]' ).addClass( 'selected' ).css( 'outline', 'none' ).blur();
//add selected class so we can highlight the selected tab
   });

	$( 'ul.simpletabs li a:first' ).click(); //simulate click on the first run.
});
Now Code break down
$( document ).on( 'click', 'ul.simpletabs li a', function()

The above jQuery code maps the click event of the list elements, so whenever the list is clicked we get the anchor link and replace the hash(#) sign with space.

var ref = $(this).attr( 'href' ).replace( '#', '' ); // 'simp_tab_first'
var divcl = ref.split('_')[1]; // 'tab'
var divid = ref.split('_')[2]; // 'first / second...'

so after replacing the hash(#) with space we will have the string “simp_tab_first”, which is split in the next two lines to get the text “tab” and “first”, which is the class and id of the div respectively.

$( 'div.'+divcl ).css( 'display', 'none' );
$( 'div#'+divid ).css( 'display', 'block' );

The above line sets the div’s css property display to none, so all the div with class “tab” will become invisible, then we set the div with the id “first” to be visible in the next line. And final two lines sets “selected” as class value for the list elements so we can highlight the selected tab with css.

It is simple isn’t it. Hope you like it. Happy coding…

1 Star2 Stars3 Stars4 Stars5 Stars (7 votes, average: 5.00 out of 5)
Loading...
pelister
3D modeler and Web designer. Founder of Techlister. Love to build sites using WordPress and Joomla. Interested in Astronomy, project member of SETI (Search for Extra Terrestrial Intelligence).

Tags: , , , , , ,

Leave a comment

Techlister© - 2012