BradBlogging
Skip to content
  • About
  • Contact
  • Advertise
  • What Is R.S.S and Why Subscribe To Us?
  • Free Premium WordPress Themes
Tweet
Share
« 9 Stellar Tips to Get More RSS Subscribers for Your Blog
5 Underutilized Methods Of Free Website Promotion That You Can Use Today! »

How to Create Efficient Jquery Tabs – Full Tutorial and XHTML

One of the biggest challenges to web designers is finding ways to place a lot of information on a page without losing usability. Tabbed content is a great way to handle this issue and has been widely used on blogs and websites. Today we’re going to build a simple tabbed information box in XHTML, then make it function using some jQuery code.

Lightweight Jquery Tabs Full Code Tutorial and Download

Beginning the XHTML Structure.

First build the structure using HTML lists. The first list is the head of our tabs:

<ul>
<!-- These are the tab headers -->
	<li><a href="#">Fruits</a></li>
	<li><a href="#">Animals</a></li>
	<li><a href="#">People</a></li>
</ul>
<ul>
<!-- This is what is displayed when the first tab is clicked -->
	<li><a href="#">Apple</a></li>
	<li><a href="#">Banana</a></li>
	<li><a href="#">Lemon</a></li>
	<li><a href="#">Orange</a></li>
</ul>
<ul>
<!-- This is what is displayed when the second tab is clicked -->
	<li><a href="#">Dog</a></li>
	<li><a href="#">Cat</a></li>
	<li><a href="#">Shark</a></li>
	<li><a href="#">Parrot</a></li>
</ul>
<ul>
<!-- This is what is displayed when the third tab is clicked -->
	<li><a href="#">Tim Barnes Lee</a></li>
	<li><a href="#">Steve Jobs</a></li>
	<li><a href="#">Richard M. Stallman</a></li>
	<li><a href="#">Bill Gates</a></li>
</ul>

Properly Formatting our Tabs in an XHTML Web Document:

Now we change our tabs adding DIVs and Selectors to XHTML code and giving some CSS styles.

<div id="content">
<h4>Tabs with Jquery</h4>
<div id="tab_container">
<ul class="tab_header">
	<li><a class="active_tab" title="content_1" href="#">Fruits</a></li>
	<li><a class="tab" title="content_2" href="#">Animals</a></li>
	<li><a class="tab" title="content_3" href="#">People</a></li>
</ul>
<div id="tab_content">
<div id="content_1" class="content">
<ul>
	<li><a href="#">Apple</a></li>
	<li><a href="#">Banana</a></li>
	<li><a href="#">Lemon</a></li>
	<li><a href="#">Orange</a></li>
</ul>
</div>
<div id="content_2" class="content">
<ul>
	<li><a href="#">Dog</a></li>
	<li><a href="#">Cat</a></li>
	<li><a href="#">Shark</a></li>
	<li><a href="#">Parrot</a></li>
</ul>
</div>
<div id="content_3" class="content">
<ul>
	<li><a href="#">Tim Barnes Lee</a></li>
	<li><a href="#">Steve Jobs</a></li>
	<li><a href="#">Richard M. Stallman</a></li>
	<li><a href="#">Bill Gates</a></li>
</ul>
</div>
</div>
</div>

Styling the Content with Basic Shape and Colour:

/*Giving page colour and font*/

body{font-family:Arial, Helvetica, sans-serif; background: #001C3E; color:#FFFFFF;}

/*Remove the lists bullets*/

ul,li{list-style:none;}

/*Entire page container, assign a size and center it*/

#content{width:600px; margin:10px auto;}

/*tab_container is the DIV that contains all the tab area, tab_content is the div that contains each of the tabs' content*/

#tab_container{padding:8px 8px; width:300px; background:#005D8C; border:1px solid #E0E0E0;}

#tab_content{padding:5px; background:#FFFFFF; border:1px solid #04667f;}

/*The TAB header*/

ul.tab_header{margin:0px; padding:0px; margin-top:5px; margin-bottom:6px; }

ul.tab_header li{display:inline;}

/*The tab header links are converted to uppercase and give it a padding and a border */

ul.tab_header li a{

color:#097793;

padding:5px 10px 6px 10px;

text-transform:uppercase;

border:1px solid #04667f;

background:#FFFFFF;}

/*On a tab change, we change the bottom border to white and fuse it with the content colour*/

ul.tab_header li a:hover{border:1px solid #CCCCCC;}

ul.tab_header a.active{color:#000000;

border-bottom: 1px solid #ffffff; background:#FFFFFF; }

a.tab{font: bold 15px Arial, Helvetica, sans-serif; text-decoration:none;}

/*Giving some style to content list, you can add styles for other elements that you like to include in the tabs */

.content ul{margin:10px 0px; padding:0 11px;}

.content ul li{ margin-bottom:3px; font-size:15px;}

.content ul li a{color:#3f4c4f;}

.content ul li a:hover{color:#899fa5;}

/*IMPORTANT, we give display none because with JQuery we show the content when it is clicked*/

#content_2, #content_3 { display:none; }

Now, you may think that the tabs look a little bare, but keep in mind that this is just a tutorial on how to use Jquery to create tabbed content. If you really want to make the tabs into something that will compliment your content, be sure to style it accordingly using CSS.

Finishing (The JQuery Code):

Now we use the Show and Hide JQuery methods to activate the content when the user clicks on a tab header. Before that remember include the JQuery library (ex. version 1.2.6 ) on our HTML document.

Note, I just use GoogleAjax’s Javscript Library to serve my Jquery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

Here is the JQuery code that generates the tabs:

<script type="text/javascript">
// <![CDATA[
     // When the Document loads
    $(document).ready(function(){
     // When a tab link is clicked
    $("a.tab").click(function () {
         // Remove old active class
       $(".active").removeClass("active");
          // Give active class to actual tab link
       $(this).addClass("active");
          // Hide the content
          $(".content").hide('slow');
         // Show the content obtaining the title atribute of current link
        var title = $(this).attr("title");
         $("#"+title).show('slow');
     });
 });
// ]]>
</script>
 

Conclusion and Jquery Tabs Demo Link:

In conclusion, this method is probably the most lightweight of all the methods available on the web.. being only a few lines of code (without comments). These Jquery Tabs will function in browsers that have Javascript enabled (I remember seeing a statistic that 98% of them do).

Demo Page: Jquery Tabs Tutorial | BradBlogging.com

Download Link: Download all the code from the  Jquery Tabs Tutorial | BradBlogging.com

Related posts:

  1. 16 Jquery Slideshow Applications You CANNOT Miss – Updated!
This entry was posted in Jquery Tools and tagged Jquery Tabbed Content, Jquery Tabs, Jquery Tools. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Enjoy this post? Theres more to come, so click here to subscribe to our RSS Feed.

« 9 Stellar Tips to Get More RSS Subscribers for Your Blog
5 Underutilized Methods Of Free Website Promotion That You Can Use Today! »

8 Comments

  1. Sereyboth
    Posted May 21, 2010 at 8:50 pm | Permalink

    Really easy to understand ! Brad! Thank!

    Reply
    • Brad Ney
      Posted June 17, 2010 at 1:51 pm | Permalink

      Glad you liked it Serey! :)

      Reply
  2. Joe
    Posted June 14, 2010 at 1:14 am | Permalink

    Hello Brad, I didn’t realize you were in my bookmarks so I thought I would ask you this basic question, which I can’t seem to figure out. I do I go about centering this Nav bar

    http://www.yanuzzi.net/applebar/

    Thank you,

    Reply
    • Brad Ney
      Posted June 17, 2010 at 1:51 pm | Permalink

      Hey Joe,

      Try adding a element to the class “kwicks” as follows:

      .kwicks {
      width: 800px;
      }

      That way, the class has a defined width which makes the div align=”center” work properly.

      Reply
  3. ??????? ???????
    Posted July 6, 2010 at 9:16 am | Permalink

    very good! thx

    Reply
  4. vin
    Posted September 21, 2010 at 1:46 am | Permalink

    how can we make individual tabs bookmarkable and linkable like we do with jquery UI tabs.

    Reply
  5. Android
    Posted October 6, 2010 at 12:26 am | Permalink

    Thank you for great tips to help me design a simple jQuery tabs.

    Reply
  6. Wiyono
    Posted March 2, 2011 at 12:40 pm | Permalink

    Really coolll….

    Reply

Post a Comment

Click here to cancel reply.

Your email is never published nor shared. 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>

CommentLuv badgeShow more posts

2285 RSS Subscribers!!

Subscribe today to receive any updates on this blog for free!

You'll also receive, "The Blog Manual" free of charge for being a subscriber which you can download at the bottom of each post.

 


Hosted by EZP.net

You might notice how quick this site loads. This is because of EZP.net's awesome web hosting services, from quick support to premium hardware, this company is one notch above the rest. You should use EZP.net to host your sites... They care about their customers.

  • Popular Posts
  • Categories

Popular Articles

  • Optimize Repeated Web Backgrounds with Photoshop
  • 16 Jquery Slideshow Scripts You Cannot Miss
  • How to Create your Own 4 Column Blog Footer - HTML/CSS Included!
  • How To: Reduce Your Blog's Bounce Rate

Blog Categories

  • Advertising & Blogs
  • Article Readability
  • Asides
  • Blog Comments
  • Blog Design
  • Blog Loading Speed
  • Contemplation
  • Featured Posts
  • How To
  • Increase Readers
  • Increase Traffic
  • Interviews
  • Jquery Tools
  • Previous Contests
  • Tutorials
  • Unique Widgets
  • Web Security
  • Website Reviews
  • Wordpress Coding
  • Wordpress Templates

About The Author

Brad Ney

I am a Wordpress enthusiast, part-time website designer, and enjoy using the latest technology via the internet for website promotion. I enjoy writing about startup websites, XHTML, CSS, Wordpress based on what I've learned in the industry.

01. Subscribe!

Click the shiny button for the RSS Feed. This will allow you to recieve each update either via email or via your favourite RSS Reader.
Beats checking the site for new updates!

02. Hand-Picked Articles

  • The Following Mentality Of The Internet
  • Blog Comment Spam
  • Increase Audience Participation with Blog Polls
  • 9 Jquery Slideshow Applications You Cannot Miss

Spend some time reading BradBlogging's most famous blog articles.

03. Start a Blog!

Take advantage of all the information here by using the resources below to start your website:

1. Top Notch Web Hosting

04. Contribute

Have a great idea for an article? Want something written about? Drop me a line!

Claim Your Free Blog Guide and Wordpress Template!

It's Brad Here and I just wanted to let you know that you are missing out on two free downloads I have for my readers. You can obtain these downloads for free by subscribing below - I promise that I will not spam and only send you updates from this blog.

Subscribe Today: