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
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.
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’s.show() 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.
J Query Related Interview Questions
|HTML 4 Interview Questions||HTML Interview Questions|
|HTML 5 Interview Questions||Zend Interview Questions|
|JqueryUI Interview Questions||Dynamic HTML Interview Questions|
|XQuery Interview Questions||jQuery Mobile Interview Questions|
J Query Related Practice Tests
|HTML 4 Practice Tests||HTML Practice Tests|
|HTML 5 Practice Tests||Zend Practice Tests|
|PHP and Jquery Practice Tests||J Query Practice Tests|
|CodeIgniter Practice Tests||Dynamic HTML Practice Tests|
J Query Tutorial
Selecting Elements With Jquery
Beyond The Basics
Faster, Simpler, More Fun
Html Form Enhancements From Scratch
Html Form Enhancements With Plugins
Interface Components From Scratch
User Interfaces With Jquery Ui
Jquery Ui Theming
Jquery, Ajax, Data Formats: Html, Xml, Json, Jsonp
Using Jquery In Large Projects
All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.