This time I will share jQuery Plugin and tutorial about Minimal Material Design Tabs Plugin In jQuery, hope it will help you in programming stack.
A super tiny jQuery tabs plugin to create responsive, Material Design style tabbed content with ripple click effect and sliding tab underline.
Built with CSS flexbox and a little bit of jQuery script.
How to use it:
1. Create the tabbed content on the web page.
01 |
< div class = "c-tab--content-container" > |
02 |
< div id = "Tab1" class = "c-tab--content active" > |
05 |
< div id = "Tab2" class = "c-tab--content" > |
08 |
< div id = "Tab3" class = "c-tab--content" > |
2. Create a tab navigation that contains anchor links pointing to the matched tabbed content.
01 |
< nav class = "c-tabs" data-toggle = "c-tabs" role = "navigation" > |
02 |
< ul class = "c-tab--navigation" > |
03 |
< li class = "c-tab--item" >< a href = "#Tab1" class = "active" >Tab 1</ a ></ li > |
04 |
< li class = "c-tab--item" >< a href = "#Tab2" >Tab 2</ a ></ li > |
05 |
< li class = "c-tab--item" >< a href = "#Tab3" >Tab 3</ a ></ li > |
06 |
< li class = "c-tab--slider" > |
07 |
< div class = "c-tab-indicator" ></ div > |
3. Download the plugin and insert the following JavaScript & CSS files into the document.
1 |
< link rel = "stylesheet" href = "./css/tabs.css" /> |
2 |
< script src = "jquery.min.js" ></ script > |
3 |
< script src = "./js/tabs.js" ></ script > |
4. Initialize the plugin. That’s it.
1 |
component.tabs.initTabs(); |
5. Override the default CSS styles in the tabs.css
as per your needs.
1 |
.c-tabs .c-tab--navigation { |
This awesome jQuery plugin is developed by tpronschinske. For more Advanced Usages, please check the demo page or visit the official website.