jQuery Tabs

Create Simple jQuery + CSS Tab

Displaying large, lengthy contents on a page is bad thing. Normally user ignores the page where they see a lot of texts & texts & texts. Here “Tabs” comes to act. Tabs are very useful to display large, lengthy contents on  a page.

Lets have a short trick on how to create jQuery tabs, its too easy to create. We will create tabs using a little bit css & jQuery.
jquery-tabs

Lets build html first.

Create a div to wrap all contents for tabs.

</pre>
<div id="tabContaier">
<ul>
	<li><a href="#tab1">Div One</a></li>
	<li><a href="#tab2">Div Two</a></li>
	<li><a href="#tab3">Div Three</a></li>
</ul>
</div>
<pre>

Now insert the contents

Insert these html inside the tabDetails div

<div id="tab1">
      <h1>Div One</h1>
      <p>Sed gravida velit ut lorem dictum vitae venenatis dolor faucibus. In vehicula malesuada mi, vel semper sem porta in. Mauris suscipit lorem eget justo congue semper.</p>
      <p>Donec et purus eget elit tristique consequat. Integer ut orci eu augue tristique viverra nec vitae odio. Nulla sem nibh, posuere quis condimentum vitae, posuere sit amet lectus. Morbi euismod tincidunt mauris ut scelerisque.</p>
</div>
<div id="tab2">
      <h1>Div Two</h1>
      <p>Sed gravida velit ut lorem dictum vitae venenatis dolor faucibus. In vehicula malesuada mi, vel semper sem porta in. Mauris suscipit lorem eget justo congue semper.</p>
      <p>Donec et purus eget elit tristique consequat. Integer ut orci eu augue tristique viverra nec vitae odio. Nulla sem nibh, posuere quis condimentum vitae, posuere sit amet lectus. Morbi euismod tincidunt mauris ut scelerisque.</p>
</div>
<div id="tab3">
      <h1>Div Three</h1>
      <p>Sed gravida velit ut lorem dictum vitae venenatis dolor faucibus. In vehicula malesuada mi, vel semper sem porta in. Mauris suscipit lorem eget justo congue semper.</p>
      <p>Donec et purus eget elit tristique consequat. Integer ut orci eu augue tristique viverra nec vitae odio. Nulla sem nibh, posuere quis condimentum vitae, posuere sit amet lectus. Morbi euismod tincidunt mauris ut scelerisque.</p>
</div>

Above, ul li has hyperlinks with #tab1, #tab2 and #tab3. These will be used to determine which tab content to show. In tabDetails divs I have used those hyperlinks as id. Make sure that you put the related id as its button hyperlink has.

Now lets maintain look and feel

Write some css for tab buttons.

#tabContaier ul{
overflow:hidden; /*Clearing float. */
      border-right:1px solid #fff;
      height:35px;
      position:absolute; /*Takings tabs to higher layer */
z-index:100;
 }
 #tabContaier li{
      float:left;
      list-style:none;
 }
 #tabContaier li a{
      background:#ddd;
      border:1px solid #fcfcfc;
      border-right:0;
      color:#666;
      cursor:pointer;
      display:block;
      height:35px;
      line-height:35px;
      padding:0 30px;
      text-decoration:none;
      text-transform:uppercase;
 }
 #tabContaier li a:hover{
      background:#eee;
 }
 #tabContaier li a.active{
      background:#fbfbfb;
      border:1px solid #fff;
      border-right:0;
      color:#333;
 }

Now write css for tab details and tab content holders.

.tabDetails{
      background:#fbfbfb;
      border:1px solid #fff;
      margin:34px 0 0; /*1px less then actual tab height to fix the border gap between active tab &amp; tab detail section. */
}
 .tabContents{
      padding:20px
 }
 .tabContents h1{
      font:normal 24px/1.1em Georgia, "Times New Roman", Times, serif;
      padding:0 0 10px;
 }
 .tabContents p{
 padding:0 0 10px;
 }

Its all set. We have a beautiful interface for tab. Now its time to make it work.

Create jQuery that make tab work

First of all hide all tab content divs, for this write a line :

$(".tabContents").hide();

Now set the first div to show by default, to do this place the code below:

$(".tabContents:first").show();
 //here :first selector filters the first div, see above we have set the first link also in active state.

Ok we have done it. Now lets fire the click event & switch the content divs. to do this look at the script below:

 $("#tabContaier ul li a").click(function(){
      var activeTab = $(this).attr("href"); //save the clicked links target
      $("#tabContaier ul li a").removeClass("active"); // remove pre-highlighted tabs
      $(this).addClass("active"); //set this link to highlight
      $(".tabContents").hide(); // again hide pre-showing div
      $(activeTab).fadeIn(); //match the target div &amp; show it
 });

That much! Now we have created a working tab using jQuery & CSS.

Demo:
Download

Comments

comments

Powered by Facebook Comments

40 thoughts on “Create Simple jQuery + CSS Tab”

  1. Blogs may not, lighting With the?While shopping online, close and smoothen.Refinance at a, love to give.Natrlich sind fr RSS, during the divorce gear and was.Their cover plans, Trading vs Real.,

  2. Thank you for publish very fine informations. Your net is good, I am amazed by the tips that you simply have on this blog. It exhibits how effectively you comprehend this topic. Bookmarked this page, will arrive back for more. You, my close friend, I located just the important information I previously looked for in all places and just couldn’t come across. What a perfect web site. Similar to this webpage your web page is 1 of my new absolute favorites.I such as this information shown and it has provided me some sort of enthusiasm to possess success for some cause, so hold up the wonderful work!

  3. How would you like to get your hands on the most powerful traffic generator within the world? AND on autopilot. It does the following and more on autopilot Article Submitter, Press Submitter, RSS, Social Bookmarker and much much more. Its a all in 1 tool and is vital for all web site owners/marketers. Its just insane… Its known as Traffic Anachy, go check them out!.

  4. Good blog! I truly love how it’s easy on my eyes and the details are well written. I am wondering how I can be notified whenever a new post has been made. I have subscribed to your rss feed which really should do the trick! Have a nice day!

  5. Fantastic blog! I really love how it is easy on my eyes and also the data are well written. I am wondering how I may be notified whenever a new post has been made. I have subscribed to your rss feed which must do the trick! Have a nice day!

  6. Fantastic blog! I really love how it is easy on my eyes as well as the info are well written. I am wondering how I could be notified whenever a new post has been made. I have subscribed to your rss feed which really should do the trick! Have a nice day!

  7. Best wishes for a extremely very clear and valuable submit. I am absolutely a violator of a lot of these principles. I quite often acquire me conflicted when composing a weblog post because I see by myself producing greater than consumers want to read, but I feel that I really need to do the subject matter proper rights by totally addressing it. I sense that by subsequent a few of these guidelines I finish up cutting out very important aspects to your dialogue. I guess you could have to come across a balance.

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>