Papermashup

Subscribe


Tweets


"RT @Eva_Shaughnessy: #finedining @romomobilecafes restaurant this evening with #NewHair #winning #SaturdayNight #GirlsNightOut http://t.co/…"

@ashleyford 3 weeks ago

"RT @kycutwilson: @ashleyford @burgerbeartom incredible. There's 5 more left! Shout about it!!"

@ashleyford 4 weeks ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Simple jQuery tabs

AshleyAshley

This tutorial looks into creating a really simple tabbed interface using just plain HTML and CSS with the functionality and interface manipulated using jQuery. Tabbed interfaces are great for maximizing the amount of space you have on your site.

Lets take a look at whats going on. We start with the document ready function. The first line of code hides all the tab containers, we then show the first one, and add the class ‘active’ to the first ‘li’ in the tab headers. Then whenever a tab is clicked it simply remove the class ‘active’ from all the tabs, then add it to the tab thats been clicked. We then take the href from the clicked tab and show it. Simple as that! You can get the complete file by grabbing the download and the demos at the bottom also.

The Code


$(document).ready(function(){
$('#tabs div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');

$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div').hide();
$(currentTab).show();
return false;
});
});

The HTML


 <div id="tabs">
    <ul>
      <li><a href="#tab-1">This is Tab 1</a></li>
      <li><a href="#tab-2">Tab Two</a></li>
      <li><a href="#tab-3">Tab Three</a></li>
      <li><a href="#tab-4">Tab Four</a></li>
    </ul>
    <div id="tab-1">
      <h3>This is a really simple tabbed interface</h3>
      <p><img src="http://papermashup.com/demos/jquery-gallery/images/t1.png" width="120" height="120" class="thumbs"/> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim. Nullam id ligula in nisl tincidunt feugiat. Curabitur eu magna porttitor ligula bibendum rhoncus. Etiam dignissim. Duis lobortis porta risus. Quisque velit metus, dignissim in, rhoncus at, congue quis, mi. Praesent vel lorem. Suspendisse ut dolor at justo tristique dapibus. Morbi erat mi, rutrum a, aliquam nec, mattis semper, leo. Maecenas blandit risus vitae quam. Vivamus ut odio. Pellentesque mollis arcu nec metus. Nullam bibendum scelerisque turpis. Aliquam erat volutpat. <br/>
        <a href="http://feeds2.feedburner.com/AshleyFord-Papermashupcom">Subscribe to my feed here</a> </p>
    </div>
    <div id="tab-2">
      <h3>Tab 2</h3>
      <p><img src="http://papermashup.com/demos/jquery-gallery/images/t2.png" width="120" height="120" class="thumbs"/> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim. Nullam id ligula in nisl tincidunt feugiat. Curabitur eu magna porttitor ligula bibendum rhoncus. Etiam dignissim. Duis lobortis porta risus. Quisque velit metus, dignissim in, rhoncus at, congue quis, mi. Praesent vel lorem. Suspendisse ut dolor at justo tristique dapibus. Morbi erat mi, rutrum a, aliquam nec <br/>
        <a href="http://feeds2.feedburner.com/AshleyFord-Papermashupcom">Subscribe to my feed here</a></p>
    </div>
    <div id="tab-3">
      <h3>Tab 3</h3>
      <p><img src="http://papermashup.com/demos/jquery-gallery/images/t3.png" width="120" height="120" class="thumbs"/> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim. Nullam id ligula in nisl tincidunt feugiat. Curabitur eu magna porttitor ligula bibendum rhoncus. Etiam dignissim. Duis lobortis porta risus. Quisque velit metus, dignissim in, rhoncus at, congue quis, mi. Praesent vel lorem. Suspendisse ut dolor at justo tristique dapibus. Morbi erat mi, rutrum a, aliquam nec, mattis semper, leo. Maecenas blandit risus vitae quam. Vivamus ut odio.<br/>
        <a href="http://feeds2.feedburner.com/AshleyFord-Papermashupcom">Subscribe to my feed here</a></p>
    </div>
    <div id="tab-4">
      <h3>Tab 4</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim. Nullam id ligula in nisl tincidunt feugiat. Curabitur eu magna porttitor ligula bibendum rhoncus. Etiam dignissim. Duis lobortis porta risus. Quisque velit metus, dignissim in, rhoncus at, congue quis, mi. Praesent vel lorem. Suspendisse ut dolor at justo tristique dapibus. Morbi erat mi, rutrum a, aliquam nec, mattis semper, leo. Maecenas blandit risus vitae quam. Vivamus ut odio. Pellentesque mollis arcu nec metus.<br/>
        <a href="http://feeds2.feedburner.com/AshleyFord-Papermashupcom">Subscribe to my feed here</a></p>
    </div>
  </div>

demodownload

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 89
  • Nathan Cross
    Posted on

    Nathan Cross Nathan Cross

    Reply Author

    I spent way too long trying to trouble shoot a bug where my tabs would scroll the page to the #ID of the div when the tab was clicked. It was literally driving me crazy. It turns out that it was the jQuery smoothscroll plugin that was to blame. It seems to be incompatible with this solution. Removing smoothscroll cleared it right up.
    Cheers!


  • richard
    Posted on

    richard richard

    Reply Author

    im new to jquery, but is there a way to make functional tab component in another tab?


  • richard
    Posted on

    richard richard

    Reply Author

    im new to jquery, but is there a way to make functional tab component in another tab?


  • waqas cheema
    Posted on

    waqas cheema waqas cheema

    Reply Author

    easy way to make menus for users but is there any way to use drag and drop on submenus as well.
    please also add support for submenus as well.
    thanks


  • Kevin
    Posted on

    Kevin Kevin

    Reply Author

    No, I need to use Divs inside the tabs, how do i modify this to show other divs contained with each tab?

    $(document).ready(function(){
    $(‘#tabs div’).hide();
    $(‘#tabs div:first’).show();
    $(‘#tabs ul li:first’).addClass(‘active’);

    $(‘#tabs ul li a’).click(function(){
    $(‘#tabs ul li’).removeClass(‘active’);
    $(this).parent().addClass(‘active’);
    var currentTab = $(this).attr(‘href’);
    $(‘#tabs div’).hide();
    $(currentTab).show();
    return false;
    });
    });


  • Kevin
    Posted on

    Kevin Kevin

    Reply Author

    I am trying to use inside the tabs to divide up the space and it does not work?

    Do I need to define the div are first?


    • Kevin
      Posted on

      Kevin Kevin

      Reply Author

      I’ve got a work around. I will manipulate each section i.e.


  • zoran
    Posted on

    zoran zoran

    Reply Author

    Hi,
    Thanks a lot for sharing this really easy implementation that doesn’t require any external plugins or libraries.. jquery is already enough:)
    cheers
    Zoran


  • IJas
    Posted on

    IJas IJas

    Reply Author

    Use of .sIbling()

    (function()
    {
    $(‘.tab div’)
    .first().addClass(‘active’)
    .siblings(‘div’).hide();

    $(‘.tab ul li a’).click(function(e)
    {
    e.preventDefault();

    $(this)
    .parent().addClass(‘active’)
    .siblings(‘li’).removeClass(‘active’);

    var currentTab = $(this).data(‘tab’);
    $(currentTab).show().siblings(‘div’).hide();
    });
    })();


    • Elias
      Posted on

      Elias Elias

      Reply Author

      It does not work. Obviously because these characters “” are added to the div and not between them. What is this bug?


  • Elias
    Posted on

    Elias Elias

    Reply Author

    It works great! Only for some reason, after the third div script code adds quotation marks “” immediately after the active divas and shifts all the way down on the value of the string. Have any suggestions? Why?

    It works great! Only for some reason, after the third div script code adds quotation marks “” immediately after the active divas and shifts all the way down on the value of the string. Have any suggestions? Why? The page on which it occurs: http://www.vozdvizhenka.info/vozdvizhenskaya/36/

    Thank U!


  • mex
    Posted on

    mex mex

    Reply Author

    thank u sir


  • Kevin
    Posted on

    Kevin Kevin

    Reply Author

    Has anyone been able to display 2 sets of tabs on the same page, if so can you let me know what code to change.


  • ali
    Posted on

    ali ali

    Reply Author

    thanks alot , regards


  • Sayan
    Posted on

    Sayan Sayan

    Reply Author

    I also added a similat articel on my blog,have a look

    http://fundapass.blogspot.in/2012/06/v-behaviorurldefaultvmlo_22.html


  • fanta
    Posted on

    fanta fanta

    Reply Author

    I’m getting “uncaught exception: Syntax error, unrecognized expression” error, any ideas what can be wrong?


  • SteeL
    Posted on

    SteeL SteeL

    Reply Author

    Im sorry to say but ur script makes every otehr DIV inside TABS display:none. which is a very hectic to set css for each div block !important.

    This one and old one is still the best for my use http://jqueryfordesigners.com/demo/tabs.html


  • Orlando Karam
    Posted on

    Orlando Karam Orlando Karam

    Reply Author

    There’s a small improvement; use $(‘#tabs > div’).hide();
    instead of $(‘#tabs div’).hide(); that way, it works even if you put divs inside your divs (basically, only the ‘bigger’ div is hidden; your code appears to hide ALL divs inside tabs (including inner divs) but then only shows the ‘bigger’ one)

    And thanks ! this is cool and easy to understand


    • Waleed Asender
      Posted on

      Waleed Asender Waleed Asender

      Reply Author

      Thank you so much for the hint, it realy solved my problem, the author should edit the post according to this note.


  • Ron Wood ( ronwooduk )
    Posted on

    Ron Wood ( ronwooduk ) Ron Wood ( ronwooduk )

    Reply Author

    Thanks for some great code. I was tearing my hair out trying to set up tabs using jquery and couldn’t get it to work. Your code has worked first time and will be used in my new web site, currently under construction. I really appreciate you sharing your knowledge and expertise. Many thanks once again.


  • ChefBob
    Posted on

    ChefBob ChefBob

    Reply Author

    I am using this code, but the pages have huge scrolls in them: exactly the height of all the tabs combined. How can I fix this? Thanks!


    • Chris Cooning
      Posted on

      Chris Cooning Chris Cooning

      Reply Author

      It’s because your inner divs, which most likely have a lot of content, are not being hidden.

      Orlando Karam made a great great explanation in a comment on this post and I quote him:

      use $(‘#tabs > div’).hide(); instead of $(‘#tabs div’).hide();

      – that way, it works even if you put divs inside your divs (basically, only the ‘bigger’ div is hidden; your code appears to hide ALL divs inside tabs (including inner divs) but then only shows the ‘bigger’ one)

      Cheers!


    • Chris Cooning
      Posted on

      Chris Cooning Chris Cooning

      Reply Author

      It’s because your inner divs, which most likely have a lot of content, are not being hidden.

      Orlando Karam made a great great explanation in a comment on this post and I quote him:

      use $(‘#tabs > div’).hide(); instead of $(‘#tabs div’).hide();

      If you look further up a bit he puts a great reference as to why.
      Cheers!


  • car hire croatia
    Posted on

    car hire croatia car hire croatia

    Reply Author

    thanks for this nice script, i’ll use it on my news site. This will perfectly fit for my news headlines.


  • Ashis
    Posted on

    Ashis Ashis

    Reply Author

    Works like a Charm. GREAT !!


  • Ashis
    Posted on

    Ashis Ashis

    Reply Author

    Works like a charm !!. GREAT


  • James
    Posted on

    James James

    Reply Author

    Nice and simple, love it. Was looking at using JQuery UI for a custom control panel, but this is much leaner. Thanks!


  • Pauly
    Posted on

    Pauly Pauly

    Reply Author

    Thank you for this really simple solution! Jquery UI is way to complicated


  • Steven Annan
    Posted on

    Steven Annan Steven Annan

    Reply Author

    No need for help on the code additions any more but thanks for setting me on the right path. I’ve found a different script that does what I need with history support and direct links to the tabs. It’s still pretty simple as well.

    Thought I’d post the link here in case anyone else is looking for this functionality. Hope this is OK.

    http://www.queness.com/post/9503/create-a-tab-interface-with-browser-history-and-url-support


  • Steven Annan
    Posted on

    Steven Annan Steven Annan

    Reply Author

    Hi Ashley
    Using your tabs for a website I’m putting together and wondered if you could help me out, I’ve modified the code a bit to allow divs inside each tab and to fade between the tabs. As well as adding the #tag for each tab to the address bar.

    What I’d like to be able to do is when the site is accessed via an external link
    eg: http://www.randomwebsite.com/#contact

    It will open the contact tab as the first tab and set the matching li to active.

    Unfortunately I Can’t work it out.

    Adding
    if(document.location.hash){ }

    with a rule to the doc ready function probably holds the key but I’m not sure what rule.

    Any help appreciated.

    Code can be found here: http://pastebin.com/DSvCFffQ

    Thanks


  • Hal
    Posted on

    Hal Hal

    Reply Author

    First, I want to say this is a great tutorial. I was quickly able to start using tabs, then bend them to my will. Looking at the amount of content I’m trying to fit on the page, I need to be able to scroll within these tabs. The site I’m working on is highly stylized and the normal scroll bars (only vertical needed) just won’t work – too large and clunky. So, I’ve been trying to use jScrollPane.

    When I use jScrollPane, the initial load looks great, however switching tabs looses all content. I cannot figure out how to get it back.

    Here’s what I’ve been using for slider reference…
    – Basic jScrollPane demo: http://jscrollpane.kelvinluck.com/basic.html

    What I’ve tried so far:
    Beyond the file needed to run jScrollPane (jquery.jscrollpane.min.js), the main call is this – ” $(‘.scroll-pane’).jScrollPane(); ” I have attempted putting it in various places within the code provided in the example above, but the only thing that comes close to working is to have it as the final line in the code (after ” return false; }); ” ).

    If there’s anything you can suggest to use stylized scroll bars within the tabs (that doesn’t crash the content upon selecting a new tab), that would be fantastic. Any help would be much appreciated. Thank you.


  • Jason Maletsky
    Posted on

    Jason Maletsky Jason Maletsky

    Reply Author

    All inside any of the main tab are hidden. Here is a modification I made to allow s inside the tab :

    $(document).ready(function(){
    $(‘#tabs div.tab-parent’).hide();
    $(‘#tabs div.tab-parent:first’).show();
    $(‘#tabs ul li:first’).addClass(‘active’);

    $(‘#tabs ul li a’).click(function(){
    $(‘#tabs ul li’).removeClass(‘active’);
    $(this).parent().addClass(‘active’);

    var currentTab = $(this).attr(‘href’);
    $(‘#tabs div.tab-parent’).hide();
    $(currentTab).show();

    return false;
    });
    });

    Overview
    How It Works
    Clinical References

    tab 1

    tab 2

    tab 3


    • sri
      Posted on

      sri sri

      Reply Author

      Thanks for the tip Jason. Also, add class=”tab-parent” for the div tabs for this to work. thanks

      —–

      —-
      Regards,
      Sri


    • jobish
      Posted on

      jobish jobish

      Reply Author

      its working fine

      $(‘#tabs div’).hide();
      $(‘#tab-1 div’).show();
      $(‘#tab-1′).show();

      $(‘#tabs ul li:first’).addClass(‘active’);

      $(‘#tabs ul li a’).click(function(){
      $(‘#tabs ul li’).removeClass(‘active’);
      $(this).parent().addClass(‘active’);

      var currentTab = $(this).attr(‘href’);
      $(‘#tabs div.tab-parent’).hide();
      $(‘#tabs div’).hide();

      $(currentTab).show();
      $(currentTab+” div”).show();


  • Alex
    Posted on

    Alex Alex

    Reply Author

    im having trouble with the way it looks when the tabs start wrapping to the next line… any solutions?


  • y8 games
    Posted on

    y8 games y8 games

    Reply Author

    I need it. Thanks a lot


  • Danny
    Posted on

    Danny Danny

    Reply Author

    Anyone figure out how to link to a specific tab from an external link, and an internal link?

    Earl P says he figured it out, but when implementing his syntax, it does not work.

    Does anyone have any idea how to do this with a clear example? What will teh actual link look like? I have seen other sites say you need to add two lines of code to the Document Ready JS…but no one has a clear answer as how to create the URL to achieve this. Someone on another site said you link to it lik an anchor tag….that also did not work.

    Any help please.


  • Syed Imtiaz Waris Warsi
    Posted on

    Syed Imtiaz Waris Warsi Syed Imtiaz Waris Warsi

    Reply Author

    very easy, very simple. best of luck.

    Regards


  • Cory Deere
    Posted on

    Cory Deere Cory Deere

    Reply Author

    How could one use two or three different images within the tabs? So you could achieve an image active state while differentiating between tabs for the different images. it seems that something in the jquery would have to be changed? I’ve tried wrapping the tabs in their own divs and styling with css but can’t get them to work independently. Any Help would be awesome!

    Thanks!


  • Rajeev Sharma
    Posted on

    Rajeev Sharma Rajeev Sharma

    Reply Author

    Simple and sweet thanks :)


  • Istria
    Posted on

    Istria Istria

    Reply Author

    Very nice tab, thanks for sharing!


  • Andrew
    Posted on

    Andrew Andrew

    Reply Author

    transition is handled by adding fadeIn to the current tab, ie…
    As this is a simple transition it’s not necessary to link to the easing script.

    $(currentTab).fadeIn(400).show();
    or
    $(currentTab).fadeIn(‘fast’).show();


  • Read
    Posted on

    Read Read

    Reply Author

    Hey,

    I absolutely loved this tutorial. It was so simple and that is exactly what everyone is looking for. I do have a quick question though, how would I go about adding unique images to each tab. I have already created the classes which contain CSS for the specific buttons. The problem is when I hover tab two and back to one, tab two stays selected while the active tab (tab one) doesn’t not appear to be active.


  • Red
    Posted on

    Red Red

    Reply Author

    Hi,

    Just to add to the above comment in regards to having the tabs link as individual links. I used the JS code you suggested and it works, however each tab now pulls in all of the content for all of the tabs. So lets say in Tab 1 I have 3 x images a,b & c. Tab 2 has 3 different images d,e & f. Once I implement you JS suggestion a,b,c,d,e,f images get displayed in the tabs. strange!

    Would love some help!

    Thanks red


  • Red
    Posted on

    Red Red

    Reply Author

    Hi,

    I was wondering if there was a way to link each tab content with a # mark or some identifier? Basically I would like to create a unique URL for each tab content so I could post that link to that particular content on facebook or twitter for example.

    Would really appreciate some help

    Thanks Red


  • Aayush
    Posted on

    Aayush Aayush

    Reply Author

    The best tabs tutorial…I needed simple and I got simple….I spent a long time making a very cool one with codaSlider and then ended up using these…Amazing…


  • Chris
    Posted on

    Chris Chris

    Reply Author

    I don’t see how you would create a link to the tab from another page in this sample. I’ve looked all over and I can’t figure out how to do this.


  • bao
    Posted on

    bao bao

    Reply Author

    nice tutorial, thanks


  • Geoffrey Gordon
    Posted on

    Geoffrey Gordon Geoffrey Gordon

    Reply Author

    I fixed the div, now I cannot put lists in either


  • Geoffrey Gordon
    Posted on

    Geoffrey Gordon Geoffrey Gordon

    Reply Author

    Cannot put div within a div either, very frustrating


  • putude
    Posted on

    putude putude

    Reply Author

    hello, I am newbie.
    Want to ask about jquery tab.
    I have a problem when there is DIV inside the container.
    ….
    ..content….

    the content won’t appear.
    Please help me.

    Thank you


  • Aman
    Posted on

    Aman Aman

    Reply Author

    hi
    your tutorial is really helpful. I have also 15+ eyes Caching Jquery tabs please see here:-

    http://jquery13.blogspot.com/2010/08/15-eyes-catching-jquery-tabs.html

    Thanks
    Aman


  • blogregator
    Posted on

    blogregator blogregator

    Reply Author

    Great tutorial! Thanks!


  • Earl P
    Posted on

    Earl P Earl P

    Reply Author

    @Ashley, It works, but a bit different then I thought.

    the string is blabla.html?tab=1&#4

    One weird thing is that once you pass the string to tab blabla.html?tab=1&#4, I can’t seem to pass to another tab from the url:

    example: if I type in blabla.html?tab=1&#2 from the blabla.html?tab=1&#4 page… it won’t pass. I’m not sure I’ll need to, but something I noticed when playing around with it. nice tutorial.

    -E.P.


  • Earl P
    Posted on

    Earl P Earl P

    Reply Author

    @Ashley, nice code! I’m going to replace some spry ish I have right now. I have nested tabs that I need to link to from another page, this should work. I hoping to be able to pass something like: blabla.html?tab=1#TabbedPanels1&#4

    I’ll let you know if it works….
    thanks.
    E.P.


  • audrey
    Posted on

    audrey audrey

    Reply Author

    hello,

    thanks for the tutorial !
    i’m trying to put some columns of text inside the tab-1 but when I use a div inside the tab div it does not appear.

    someone in the forum suggested to write $(’#tabs > div’).hide();
    instead of
    $(’#tabs div’).hide();

    I did it but I still don’t manage to put another div element inside one of the tabs…

    what should I do ?

    thank you for your help,

    audrey


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @Audrey i cant understand why you’re having problems. If you like you can email me your code to ashley at dotdashcreate dot com and i can take a look for you.


  • wpfeed
    Posted on

    wpfeed wpfeed

    Reply Author

    the best jQuery tabs to use!!!


  • uppercanuck
    Posted on

    uppercanuck uppercanuck

    Reply Author

    Nice work! Has anyone modified the script to fade out a tab on mouseout?


  • Jacob Miller
    Posted on

    Jacob Miller Jacob Miller

    Reply Author

    I would like to know if its possible to have scroll bars in jQuery tabs?


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @Jacob you could just set the contents of the container div to overflow:scroll; with a bit of CSS make sure you set a height on the div and you’ll see the scroll bar on the right.


  • joseph
    Posted on

    joseph joseph

    Reply Author

    thanks for your great example
    I don’t know to to call it in your code? so, i need to access tab-3 from another page ? what can i do to make the page open in this tab?


  • slacey
    Posted on

    slacey slacey

    Reply Author

    Thanks Ashley! I think this will work, although I’m bummed I have to change all my code. Your tabs were so nice and clean!

    But thank you for helping me find this one.


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @slacey no problem :) depending on your JavaScript knowledge you might be able to edit my tabs to work with the demo i posted.

      at a glance you would need to add the below code:

      // Determine which tab should show first based on the URL hash
      var panelLocation = location.hash.slice(1);
      if(panelLocation){
      var panelNum = panelLocation;
      }else{
      var panelNum = ‘1’;
      }


  • slacey
    Posted on

    slacey slacey

    Reply Author

    Thanks for this! It’s exactly what I needed and works very well. You said you could dig out an example of linking directly to a certain tab from an outside page. Could you please do that? I really need to do this and can’t find the code for this specific tab system.

    Please and thank you!


  • Vicky
    Posted on

    Vicky Vicky

    Reply Author

    NICE Graphics..Thanks for the TUT.


  • Marc Mcleod
    Posted on

    Marc Mcleod Marc Mcleod

    Reply Author

    Is it possible to link directly to one of the tabs? E.g. If I wanted to link directly to tab #3 from another page, how could this be achieved?


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @Marc yeah it would be possible i’d need to dig out an example of that online


  • Michael Evangelista
    Posted on

    Michael Evangelista Michael Evangelista

    Reply Author

    That was, another <div> element 😉


  • Michael Evangelista
    Posted on

    Michael Evangelista Michael Evangelista

    Reply Author

    One Suggestion:
    add the immediate-child > selector to the rules

    $(‘#tabs > div’).hide();
    instead of
    $(‘#tabs div’).hide();

    In case the user wants to put another element inside of one of the tabs.
    Otherwise – perfect, simple, thanks!


  • Whack Design
    Posted on

    Whack Design Whack Design

    Reply Author

    Great post! Thanks for taking the time to write it. I have one question for you, I want some of the ‘s in the to actually link to outside links how can I do that?

    Thanks in advance


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @whackdesign thanks for the comment, didn’t get the question as the code was removed automatically though :(


  • web design hastings
    Posted on

    web design hastings web design hastings

    Reply Author

    Great simple tab list, will re-work for a site i’m currently working on!


  • organizedfellow
    Posted on

    organizedfellow organizedfellow

    Reply Author

    Maybe adding the following:
    a { outline:none; }

    Will help with the tabs showing the outline.


  • Jason Warner
    Posted on

    Jason Warner Jason Warner

    Reply Author

    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @jason I think you’ll find the code is pretty much exactly the same. but thanks for the link I’m sure people will find it useful :)


  • Richard Francis
    Posted on

    Richard Francis Richard Francis

    Reply Author

    Cool! Thanks for the tut :)


  • mahesh
    Posted on

    mahesh mahesh

    Reply Author

    Nice tutorial,
    Nice demo,
    Can you explain how to implement browser history management for tabs with cookie,
    i am awaiting to your post


  • Ben
    Posted on

    Ben Ben

    Reply Author

    Cool, I was looking to do something like this a few days ago. Ended up using the jQuery UI though


  • Jake Rocheleau
    Posted on

    Jake Rocheleau Jake Rocheleau

    Reply Author

    Simple is definitely the key word here, fantastic tutorial and very easy to follow.