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.
