• Choose a category
• All
• Classic-Fiction

By Root 1137 0

less spiffy than our cool tabs, but it’s perfectly functional and provides access to all the same content. First, we’ll set up our tab contents as a simple collection of div elements:

chapter_05/11_simple_tabs/index.html (excerpt)

Next, we need to create our tab navigation bar. As with so many controls and effects, it’s the overall illusion that’s important. An unordered list of links will do nicely, but we’ll style them to look tab-like:

chapter_05/11_simple_tabs/index.html (excerpt)

• Intro
• About Us
• Disclaimer

We’ve styled the links with CSS to have a tab-like appearance, but there are dozens of different ways of accomplishing this, so use whatever you’re familiar with or what seems most sensible. We’ve opted for extremely basic styles, since what we want to focus on is the functionality.

The first task we’ll do (after our document’s ready) is hide all of the tabs except the first one—this will be our default tab. We could do this by hiding all the panes, and then showing the first one, like this:

$('#info p').hide().eq(0).show();

But this makes jQuery do more work than is necessary; we want to avoid hiding a tab only to show it again straight away. Instead, we can be more specific with our selector; we can combine filters to select everything except the first element:

chapter_05/11_simple_tabs/script.js (excerpt)

$('#info p:not(:first)').hide();

The important point is that once the page loads, only one tab content pane is displayed to the user. The code to switch tabs is straightforward, and quite similar to the other hide/show controls we’ve built so far:

chapter_05/11_simple_tabs/script.js (excerpt)

$('#info-nav li').click(function(e) {

$('#info p').hide();

$('#info-nav .current').removeClass("current");

$(this).addClass('current');

var clicked = $(this).find('a:first').attr('href');

$('#info ' + clicked).fadeIn('fast');

e.preventDefault();

}).eq(0).addClass('current');

There’s one peculiar aspect worth pointing out: to select the content pane corresponding to the clicked link, we’re joining the href attribute of the link directly to our selector using the JavaScript + operator. This only works because anchor links use the hash symbol (#) to identify their targets, and jQuery also uses the hash symbol to select elements by id. This is pure coincidence, but it’s very fortunate for us as there’s no need to parse the text or use regular expressions to create our selector.

After we’ve attached the click handler, we filter our navigation list to just the first element using the eq selector and add the current class to it. In our example the first tab is the default tab; if you want a different tab to be first, you need to change the 0 (as it’s a zero-based index) to the one you’d prefer.

jQuery UI Tabs

While our basic tab solution provides a good foundation for us to build on, we’re by no means the first people to attempt to build a tabbed content pane using jQuery. Enough people have demanded tabbed interfaces for the jQuery UI library to include a very feature-rich tab widget as part of its control collection.

Before you throw away our basic tabs in favor of the shiny jQuery UI tabs, think about what you want your tabs to do. With the jQuery knowledge you’ve acquired so far you should have no problems implementing many of the features yourself —tasks like changing tabs on mouseover instead of on click, programmatically changing tabs, or collapsing a tab’s content when you double-click on the tab itself.

One feature that would take us significantly more work to implement (at least for the moment) is the ability to load content via Ajax. We’ll be looking at Ajax in a lot more detail in Chapter 6, but for the