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;
});
});

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();
});
})();

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!

Works like a Charm. GREAT !!

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

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

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.

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

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.

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!

Very nice tab, thanks for sharing!

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.

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

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.

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

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

Great tutorial! Thanks!

@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.

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.

NICE Graphics..Thanks for the TUT.

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

Will help with the tabs showing the outline.