jQuery CSS3 Tabs With Breadcrumb and Pagination: ClassyTabs
Tabs are a useful tool for providing bulk of information in a small space with complete interactive experience. They can animate, contain images and forms, list features, and provide tabbed interface for dynamic content and much more.
However most tab solutions available online are too complex to personalize, scale up or trim down – unlike Classy Tabs.
Classy Tabs is a lightweight, jQuery plugin that creates clean, fast, and efficient tabs. Powered by jQuery and CSS3, Classy Tabs is free to use and easy to personalize for all types of contents. You can use it to display plain text, dynamic content, images, forms etc.
Classy Tabs can also be personalized to modify colors and styles, add paging/navigation (check out free jQuery Pagination plugin), provide visual effects and do much more to suit your design template. It renders cleanly and efficiently in all major browsers and can be integrate with all popular publishing platforms like WordPress etc.
- roottitle: Title for root/home, this title will be used for breadcrumb under tab e.g. Home
- rooturl: The url for root/home, e.g http://www.greepit.com
- showbreadcrumb: If true bredcrumb navigation will be displayed, set showbreadcrumb to false if you dont want to show breadcrumb, default is true.
- selectedtab: This parameter determines which tab to be displayed when the page loads, by default fist tab will be displayed, to show second tab set value to 1, for third tab use 2 and so on..
- ontabclick: Callback function to be called when a particular tab is clicked, tab id will be returned as a parameter to this function. See the example below for details.
Add the following under <Head> tag of your HTML file.
- Add a reference to latest jQuery script
- Add a reference to classytab.js file
- Add a reference to classytab.css file
You also need to add an unordered list containing anchor tags under <Body> tag of your HTML file. Wrap all your contents within a block element (div) and add class “tab-contents”, for each of your content add the class “tab-content”.
Finally, add the following code under <Head> tag.