jQuery Tabs Tutorial

December 26th, 2012 Leave a comment
Like the article?
jQuery Tabs Tutorial

jQuery tabs on content have become a stylish addition to Web 2.0 websites, but it’s not always obvious just how to make them work, and many people have been writing up tutorials on how to write your own tab scripts using jQuery. Thankfully, however, there’s an addition to jQuery called jQueryUI that includes tab support and pre-built tab functions so you don’t have to roll your own every time you write a website. Here’s a quick tutorial on how to get them up and running on your website!

Method A: The Conventional Way

jQueryUI now supports tabs as part of its integrated codebase, and it’s very easy to call to within your HTML. Here’s a sample webpage that uses the jQueryUI tabs function to display tabs:

<!doctype html>
<head>
    <meta charset="utf-8" />
    <title>jQuery Tab Test Page</title>
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <script>
    $(function() {
        $( "#tabs" ).tabs();
    });
    </script>
</head>
<body>
 
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
        <li><a href="#tabs-3">Tab 3</a></li>
    </ul>
    <div id="tabs-1">
        <p>This is a tab!</p>
    </div>
    <div id="tabs-2">
        <p>This is a different tab!<p>
    </div>
    <div id="tabs-3">
        <p>This is another different tab! </p>
    </div>
</div>
 
 
</body>
</html>

This code will generate clean looking tabs that work well, and the jQuery system itself is quite robust. Many of the stylistic aspects of the code can be changed using simple jQuery functions and variables. For example, collapsible tabs would only require this small tweak:

$(function() {
        $( "#tabs" ).tabs({
            collapsible: true
        });
    });

And having tabs that open on mouseover only requires changing the event of the jQuery action from the default, which is click, to mouseover:

$(function() {
        $( "#tabs" ).tabs({
            event: "mouseover"
        });
    });

The code can be mixed and matched as well, and so if you want collapsible mouseover tabs that can easily be accomplished. The tabs themselves are also open to manipulation to your heart’s content: if you want tabs on the bottom, sortable tabs, or tabs that fetch content using AJAX, that’s definitely doable. The jQueryUI addon library has made it quite easy to add stylish UI elements to your website, and tabs is just one of the many that they include to make your website look as great as it can. jQuery tabs are a slick addition to any Web 2.0 website, and hopefully this tutorial has helped you understand just how easy it is to add them to your site!

Help us spread the word!
  • Twitter
  • Facebook
  • LinkedIn
  • Pinterest
  • Delicious
  • DZone
  • Reddit
  • Sphinn
  • StumbleUpon
  • Google Plus
  • RSS
  • Email
  • Print
Don't miss another post! Receive updates via email!

Comment