标签是一组逻辑分组的内容,允许我们在它们之间快速翻转并保存像手风琴一样的空间.
以下代码定义选项卡的布局 :
<!-- 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>
其中 :
< div class ="tabs"> : 它是所有选项卡的必需包装器.如果我们错过了,那么标签就完全无法使用.
< div class ="tab"> : 它是一个标签,应该有唯一ID 属性.
< ; div class ="tab active"> : 它是一个单独的活动选项卡,它使用额外的活动类使选项卡可见(活动).
您可以在标签布局中使用某些控制器,以便用户可以在它们之间切换.
为此,你需要创建链接(< a>标签)与 tab-link 类和 href 属性等于目标选项卡的 id 属性 : 去;
<!-- 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>
如果使用单个选项卡链接在多个选项卡之间切换,则可以使用类而不是使用 ID的和数据选项卡属性.
<!-- 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>
tab-link的 data-tab 属性包含目标选项卡/标签的CSS选择器.
我们可以使用不同的制表方式,这些方法在下表中指定 :
S.No | Tabs Types&说明 |
---|---|
1 | 内联选项卡 内联选项卡是以内联方式分组的集合,允许您在它们之间快速切换. |
2 | 从导航栏切换选项卡 我们可以在导航栏中放置标签,允许您在它们之间切换. |
3 | 从标签栏切换视图 单个标签可用于在具有自己的导航和布局的视图之间切换. |
4 | 动画标签 您可以使用简单转换(动画)来切换标签. |
5 | 可擦除选项卡 您可以使用 tabs-swipeable-wrap 类为选项卡创建具有简单转换的可滑动选项卡. |
6 | 选项卡JavaScript事件 使用JavaScript代码时可以使用JavaScript事件对于标签. |
7 | 使用JavaScript显示标签 您可以使用切换或显示标签JavaScript方法. |