Tabbing Through a Document - J Query

You might have a page that has quite a bit of data that all belongs together because of site architecture, as opposed to separating it into distinct pages. In such a case, instead of simply having a lengthy document with headings and paragraphs, a tabbed interface often makes better sense. In this case, the tabs work as one might expect a desktop application to function. Instead of leaving the page that you are on, the relevant information associated with each tab is brought to the forefront, as shown in

(Using tabs to help users navigate information)

Figure :(Using tabs to help users navigate information).

One such example of this type of functionality is the Yahoo! home page.


By grabbing the href="..." of an inter page anchor link, we can use jQuery to then find the ID of the target, hide its siblings, and bring the target element into the foreground.This is by far one of the simpler applications of jQuery yet can be used to great effect.

Tabs—HTML code

Tabs—jQuery code


When the function runs initially, the first tabbed content area is revealed, while the rest remain hidden because of the display: none style rule in our preload.css file.
Beyond that, all we have to do is listen for any link with in <ul class="tabs">to beclicked. If it doesn’t already have class="current", then we know its content is obscured,so we add class="current" to the clicked link and remove it from any sibling tabs that might have it. Next, we grab the href="..." or the clicked link, which points to an ID in the same page, and we reveal that element via jQuery’ method,while simultaneously hiding any sibling tabbed content areas that might be visible.
Note that if you want enhanced functionality, such as firing custom events when tab states change or loading remote content via Ajax, be sure to check out the official jQueryUI Tab widget.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

J Query Topics