This time I will share jQuery Plugin and tutorial about Minimal Themeable jQuery Tabs Plugin – CardTabs, hope it will help you in programming stack.
CardTabs is an ultra-light, cross-browser jQuery tabs plugin that automatically creates tabs to switch between tabbed content on click.
How to use it:
1. Include the jQuery CardTabs plugin and other required resources on the webpage.
1 |
< link rel = "stylesheet" href = "jquery.cardtabs.css" > |
2 |
< script src = "//code.jquery.com/jquery.min.js" ></ script > |
3 |
< script src = "jquery.cardtabs.js" ></ script > |
2. Create the tabbed content and define the tab names in the data-tab
attribute:
02 |
< div data-tab = "tab 1" > |
05 |
< div data-tab = "tab 2" > |
08 |
< div data-tab = "tab 3" > |
3. Call the main function cardTabs
on the top container and done.
4. The plugin comes with 4 themes from which you can choose during init.
5. If you’d like to set the active tab on page load:
1 |
<div class= "active" data-tab= "tab 2" > |
6. You’re also allowed to create your own themes in the CSS as this:
02 |
div.card-tabs-bar.graygreen { |
03 |
border-bottom : 1px solid #e5e5e5 ; |
07 |
div.card-tabs-bar.graygreen a { |
16 |
div.card-tabs-bar.graygreen a.active { |
17 |
background-color : #fafafa ; |
18 |
border-top : 4px solid #2CC185 ; |
21 |
div.card-tabs-stack.graygreen div[data-tab] { |
23 |
background-color : #fafafa ; |
24 |
border : 1px solid #e5e5e5 ; |
Change log:
2018-03-29
This awesome jQuery plugin is developed by blekerfeld. For more Advanced Usages, please check the demo page or visit the official website.