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.
ClassyTab Parameters
- 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://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.
Using ClassyTab
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.
<script type="text/javascript>$(document).ready(function() { $('#classytabs').classytabs({ root: 'Home', rootlink: 'http://greepit.com',ontabclick}); });</script>
Hi,
Thanks for giving this script. However, I am trying to disable the breadcrumb. When I set it to False in the js file, everything stops working. i.e. clicking the tabs no longer does anything.
Am I doing something wrong?
Any help appreciated.
Thanks
Red,
The issue is fixed and updated.
Thanks for this, it is great! I’ve got a question… when I add any links, when they’re click, they just load a blank tab. But, if you right-click them, you can successfully open them in a new window. Is there something additional that I need to do to get links working to external pages?
Thanks!
Hi,
I am trying to implement the plugin on a singlepage website. I have a navigation at the top of the page, and each time I click the navigation in the top and then scroll to see the tabs, the content of the selected tab is dissappeared and the breadcrumb is left together with a styled selected tab.
I tried changing the conditions in the js so the content of the tab is only affected by tablinks, but I do not have enough js experience for this. Is it possible?
Thanks in advance.