Tabs
优质
小牛编辑
127浏览
2023-12-01
描述 (Description)
标签是一组逻辑分组的内容,允许我们在它们之间快速翻转并保存像手风琴一样的空间。
标签布局
以下代码定义选项卡的布局 -
<!-- 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>
Where −
<div class = "tabs"> - 它是所有选项卡的必需包装器。 如果我们错过了这个,标签将根本不起作用。
<div class = "tab"> - 它是一个单选项卡,应具有unique id属性。
<div class = "tab active"> - 它是一个活动选项卡,它使用其他active类使选项卡可见(活动)。
在标签之间切换
您可以在选项卡布局中使用某些控制器,以便用户可以在它们之间切换。
为此,您需要使用tab-link类创建链接(<a>标签),并且href属性等于target标签的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's和data-tab属性。
<!-- 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 | 选项卡类型和描述 |
---|---|
1 | 内联选项卡 内联选项卡是以内联方式分组的集合,允许您在它们之间快速切换。 |
2 | 从导航栏切换选项卡 我们可以在导航栏中放置标签,允许您在它们之间进行切换。 |
3 | 从标签栏切换视图 单个选项卡可用于在具有自己的导航和布局的视图之间切换。 |
4 | 动画标签 您可以使用简单转换(动画)来切换选项卡。 |
5 | 可滑动的标签 您可以使用tabs-swipeable-wrap类为选项卡创建具有简单转换的可滑动选项卡。 |
6 | 选项卡JavaScript事件 当您使用选项卡的JavaScript代码时,可以使用JavaScript事件。 |
7 | 使用JavaScript显示选项卡 您可以使用JavaScript方法切换或显示选项卡。 |