This time I will share jQuery Plugin and tutorial about Professional Clean Tabbed Content In jQuery, hope it will help you in programming stack.
A professional, clean, responsive tabbing system to switch between tabbed content by clicking/tapping on tabs. Written in jQuery and CSS/CSS3.
How to use it:
1. Add tabs and tabbed content to the tabbing system.
- .is-current: Set active tab on page load
- data-tab-list: Unique ID.
- data-tab-info: Tab info
04 |
< div class = "tab__button" > |
06 |
< li class = "js-tab-trigger item is-current" data-tab-list = "tabGroup1" data-tab-info = "tab01" > |
07 |
< button class = "button" type = "button" >Tab 1</ button > |
09 |
< li class = "js-tab-trigger item" data-tab-list = "tabGroup1" data-tab-info = "tab02" > |
10 |
< button class = "button" type = "button" >Tab 2</ button > |
12 |
< li class = "js-tab-trigger item" data-tab-list = "tabGroup1" data-tab-info = "tab03" > |
13 |
< button class = "button" type = "button" >Tab 3</ button > |
19 |
< div class = "tab__content" > |
20 |
< div class = "js-tab-content content is-current" data-tab-list = "tabGroup1" data-tab-info = "tab01" > |
21 |
< h2 class = "title" >Tab 1</ h2 > |
23 |
< div class = "imageWrap" >< img class = "image" src = "1.jpg" alt = "image alt" ></ div > |
24 |
< p class = "text" >Tab 1 Content</ p > |
27 |
< div class = "js-tab-content content" style = "display: none;" data-tab-list = "tabGroup1" data-tab-info = "tab02" > |
28 |
<< h2 class = "title" >Tab 2</ h2 > |
30 |
< div class = "imageWrap" >< img class = "image" src = "2.jpg" alt = "image alt" ></ div > |
31 |
< p class = "text" >Tab 2 Content</ p > |
34 |
< div class = "js-tab-content content" style = "display: none;" data-tab-list = "tabGroup1" data-tab-info = "tab03" > |
35 |
< h2 class = "title" >Tab 3</ h2 > |
37 |
< div class = "imageWrap" >< img class = "image" src = "3.jpg" alt = "image alt" ></ div > |
38 |
< p class = "text" >Tab 3 Content</ p > |
2. The necessary CSS styles for the tabbing system.
13 |
border-left : 1px solid #ddd ; |
23 |
border-bottom : 2px solid transparent ; |
24 |
transition: all . 25 s ease-in-out; |
28 |
border-bottom : 2px solid #31a0ca ; |