<!--Tabs wrapper, shoud have "tabs" class.It is a required element--> <div class = "tabs"> <!--The tab, should have "tab" class and unique id attribute--> <!--The tab is active by default -"active" class --> <div class = "tab active" id = "tab1"> ... The content for Tab 1 goes here ... </div> <!--The second tab, should have "tab" class and unique id attribute--> <div class = "tab" id = "tab2"> ... The content for Tab 2 goes here ... </div> </div>
<!--Here the link is used to activates 1st tab, has the same href attribute (#tab1) as the id attribute of 1st tab (tab1) --> <a href = "#tab1" class = "tab-link active">Tab 1</a> <!--Here the link is used to activates 2st tab, has the same href attribute (#tab2) as the id attribute of 2st tab (tab2) --> <a href = "#tab2" class = "tab-link">Tab 2</a> <a href = "#tab3" class = "tab-link">Tab 3</a>
<!--for Top Tabs --> <div class = "tabs tabs-top"> <div class = "tab tab1 active">...</div> <div class = "tab tab2">...</div> <div class = "tab tab3">...</div> </div> <!--for Bottom Tabs--> <div class = "tabs tabs-bottom"> <div class = "tab tab1 active">...</div> <div class = "tab tab2">...</div> <div class = "tab tab3">...</div> </div> <!--for Tabs links--> <div class = "tab-links"> <!--Links are switch top and bottom tabs to .tab1--> <a href = "#" class = "tab-link" data-tab = ".tab1">Tab 1</a> <!--Links are switch top and bottom tabs to .tab2--> <a href = "#" class = "tab-link" data-tab = ".tab2">Tab 2</a> <!--Links are switch top and bottom tabs to .tab3--> <a href = "#" class = "tab-link" data-tab = ".tab3">Tab 3</a> </div>
| S.No | 标签类型和描述 |
| 1 | 内联标签
内联标签是内联分组的集合，允许您在它们之间快速切换。
|
| 2 | 从导航栏中切换标签
我们可以在导航栏中放置标签，让您可以在它们之间切换。
|
| 3 | 从标签栏切换视图
单个标签可用于在具有自己导航和布局的视图之间切换。
|
| 4 | 动画标签
您可以使用简单的过渡（动画）来切换标签。
|
| 5 | 可滑动标签
您可以使用
tabs-swipeable-wrap 类创建具有简单过渡的可滑动标签标签。
|
| 6 | 标签 JavaScript 事件
当您使用标签的 JavaScript 代码时，可以使用 JavaScript 事件。
|
| 7 | 使用 JavaScript 显示标签
您可以使用 JavaScript 方法切换或显示标签。
|
