Style Your jQuery-UI Tabs


This article will explain and guide you step by step how to style your jQuery-UI tabs and make them look like this:

For this example you will need jQuery and jQuery-UI for the tabs plugin. There are many ways to use the tabs plugin and here I will use one of those methods.

jQuery UI Tabs Markup

The tabs plugin gets a parent element that contains an unordered list (<ul>). Each item in the list (<li>) represents a tab and contains an anchor (<a>) with a link to the data container div. For example:

Tabs plugin structure
<div id="tabsContainer">  
    <ul>
        <li><a href="#firstTab">First Tab<a/></li>
        <li><a href="#secondTab">Second Tab<a/></li>
        <li><a href="#thirdTab">Third Tab<a/></li>
    </ul>
    <div id="firstTab">
        Content for the first tab
    </div>
    <div id="secondTab">
        Content for the second tab
    </div>
    <div id="thirdTab">
        Content for the third tab
    </div>
</div>  

As you can see the parent element (“div#tabsContainer”) also contains the data containers. Each anchor has a reference to the id of the data container it represents. This way the tabs plugin knows for each tab which div to display.

Our Tabs Markup

This is our example’s structure:

Our example’s structure
<div id="simpleTabs">  
    <ul>
        <li><a href="#facebook">Facebook</a></li>
        <li><a href="#twitter">Twitter</a></li>
        ......
        ......
    </ul>
    <div id="facebook">
        content about Facebook here 
    </div>
    <div id="twitter">
        content about Twitter here
    </div>
    ......
    ......
</div>

Because this is not the final markup, I summarized and didn’t put the whole code. As you can see I created a parent div with unordered list and data containers in it. When running the tabs plugin on the code above I’ll get regular tabs as you can see:

When the tabs plugin generates the tabs, it makes manipulation on the HTML elements. After generating it, the HTML looks like similar to this:

After applying tabs plugin
<div id="simpaleTabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">  
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
        <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active">
            <a href="#facebook" class="ui-tabs-anchor">Facebook</a>
        </li>
        <li class="ui-state-default ui-corner-top">
            <a href="#twitter" class="ui-tabs-anchor">Twitter</a>
        </li>
        ......
        ......
    </ul>
    <div id="facebook" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
        content about Facebook here 
    </div>
    <div id="twitter" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
        content about Twitter here
    </div>
</div>

The tabs plugin added a few classes to the elements. This is something important to know and we use this when we change styles. Now we want each tab to contain an icon and a text. Therefore we will add a div inside each anchor and it will hold the text and the icon as a background image. Notice that HTML5 allows wrapping of block-level elements like <div>s with basic <a> element. Now, each list item looks like:

List item new look
<li><a href="#facebook"><div>Facebook</div></a></li>;

Css and Tabs Style

Now we are going to change the styles of our tabs. Our web application might use the tabs plugin more than once, and probably different tabs in our application will have different styles designs. For this reason we want to separate the design of the current tabs by adding a class to the parent element:

Add class to the parent element
<div id="tabsWithStyle" class="style-tabs">

This way each tabs with the “style-tabs” class will share the same style and other tabs can have different styles.

As we saw before, the tabs plugin has changed the HTML and added some classes. Those classes and styles are defined in the jQuery-UI css file and in order to change the appearance of our tabs we need to change them. Changing the original jQuery-UI css file might distort the page since those classes are used in many ways and in many other jQuery-UI plugins. In addition, changing the original css file will prevent replacing the jQuery-UI theme because the changes might get lost. Therfore the changes will be made in our style.css file.

Remember the wrapper divs we added inside each anchor? Now is the time to give them background. Each div will get an “icon” class that defines width and font and maniplates the positions of the text and the icon image:

Icon div style
.style-tabs .ui-tabs-nav li .icon { 
    color: #787878;
    background-position: center 3px;
    padding-top: 40px;
    font-weight: bold;
    font-size: 12px;
    text-align: center;
    width: 80px;
}

In addition, each tab’s div has a different icon image and therefore a different icon image class.

Complete CSS File

Tabs Style
.facebook-icon { background: url(../assets/images/facebook.png) no-repeat; height: 32px; width: 32px; }
.twitter-icon { background: url(../assets/images/twitter.png) no-repeat; height: 32px; width: 32px; }
.linkedin-icon { background: url(../assets/images/linkedin.png) no-repeat; height: 32px; width: 32px; }
.google-icon { background: url(../assets/images/google.png) no-repeat; height: 32px; width: 32px; }
.wikipedia-icon { background: url(../assets/images/wikipedia.png) no-repeat; height: 32px; width: 32px; }
.picasa-icon { background: url(../assets/images/picasa.png) no-repeat; height: 32px; width: 32px; }

.style-tabs {
    background: none;
    width: 480px;
}
.style-tabs,
.style-tabs .ui-tabs-nav li a,
.style-tabs .ui-tabs-nav {
    padding: 0;
}
.style-tabs .ui-tabs-panel {
    padding: 5px;
}
.style-tabs .ui-widget-header {
    border: none;
    background: url(images/TabMenu.png) repeat;
    height: 74px;
    width: 100%;
}
.style-tabs .ui-corner-all {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}
.style-tabs .ui-tabs-nav li {
    position: relative;
    height: 100%;
    cursor: pointer;
    margin: 0;
    top: 0;
}
.style-tabs .ui-widget-header .ui-state-default {
    background: none;
    border: none;
}
.style-tabs .ui-tabs-nav li.ui-tabs-active,
.style-tabs .ui-tabs-nav li:hover {
    background: url(images/SelectedMiddle.png) repeat;
}
.style-tabs .ui-tabs-nav li .icon {
    color: #787878;
    background-position: center 3px;
    padding-top: 40px;
    font-weight: bold;
    font-size: 12px;
    text-align: center;
    width: 80px;
}
.style-tabs .ui-tabs-nav li.ui-tabs-active .icon,
.style-tabs .ui-tabs-nav li:hover .icon {
    color: #414141;
}
.style-tabs .ui-tabs-nav li.ui-tabs-active .icon:before,
.style-tabs .ui-tabs-nav li:hover .icon:before {
    content: url(images/SelectedSides.png);
    position: absolute;
    right: 0;
    top: 0;
}
.style-tabs .ui-tabs-nav li.ui-tabs-active .icon:after,
.style-tabs .ui-tabs-nav li:hover .icon:after {
    content: url(images/SelectedSides.png);
    position: absolute;
    left: 0;
    top: 0;
}
.style-tabs .ui-tabs-nav li a {
    outline: none;
}
.style-tabs .ui-tabs-nav li.ui-tabs-active a {
    cursor: pointer;
}

Notice that those classes are based on the generated markup and this is how I know which classes to change. Among the changes, those styles also:

  • Set fixed width to the tabs container
  • Define tab hover style to look like selected tab
  • Use the “:before” and “:after” pseudo elements in order to put an image before and after selected tab

Complete Markup

Tabs markup
<!doctype html>
<html>
    <head> 
        <title>Custom jQuery Tabs</title>
        <script type="text/javascript" src="assets/js/jquery-1.9.0.min.js"></script>
        <script type="text/javascript" src="assets/js/jquery-ui-1.10.0.custom.min.js"></script>
        <link rel="stylesheet" href="assets/css/jquery-ui-1.10.0.custom.min.css" type="text/css"/>
        
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <div id="tabsWithStyle" class="style-tabs">
            <ul>
                <li><a href="#facebook"><div class="icon facebook-icon">Facebook</div></a></li>
                <li><a href="#twitter"><div class="icon twitter-icon">Twitter</div></a></li>
                <li><a href="#linkedin"><div class="icon linkedin-icon">LinkedIn</div></a></li>
                <li><a href="#google"><div class="icon google-icon">GooglePlus</div></a></li>
                <li><a href="#wikipedia"><div class="icon wikipedia-icon">Wikipedia</div></a></li>
                <li><a href="#picasa"><div class="icon picasa-icon">Picasa</div></a></li>
            </ul>
            <div id="facebook">
                content about Facebook here 
            </div>
            <div id="twitter">
                content about Twitter here
            </div>
            <div id="linkedin">
                content about LinkedIn here
            </div>
            <div id="google">
                content about Google Plus here
            </div>
            <div id="wikipedia">
                content about Wikipedia here
            </div>
            <div id="picasa">
                content about Picasa here
            </div>
        </div>
        <script type="text/javascript">
            $(function() {
                $('#tabsWithStyle').tabs();
            });
        </script>
    </body>
</html>

Demo & Download

That’s all! have fun and don’t hesitate to leave your comment!

  • Leonardo

    How excellent was this, it helped me a lot to create a 5 step tab registration by changing its images 🙂

    Which plugins do you use in Sublime Text 2? I could use some shortcuts and reduce time with my coding that I know can be done.

    Thanks,
    Leo

  • Sam

    Hi,
    Im trying to get this to work on shopify product details page but something is wrong, i don’t need the icons just the name of the tab and need to style them. In shopify you have to add the CSS to the main CSS file of the theme and the html inside the products for each product, i got it working with the default jQuery CSS copied but i think there is too many unnecessary code. Would it be possible to give some help for this. Thank you so much.
    Cheers,
    Sam