Foundation 选项卡教程

2026-04-17 15:28:54

1、选项卡使用 <ul class="tabs" data-tab> 来创建, 各个选项使用 <li> 元素并加上 .tab-title 类来创建。

提示: 当前选中项可以使用 .active 类。

实例

注意 .active 类会自动添加到当前选中的选项卡上：

实例

<ul class="tabs" data-tab> <li class="tab-title active"><a href="#home">Home</a></li> <li class="tab-title"><a href="#menu1">Menu 1</a></li> <li class="tab-title"><a href="#menu2">Menu 2</a></li> <li class="tab-title"><a href="#menu3">Menu 3</a></li></ul><div class="tabs-content"> <div class="content active" id="home"> <h3>HOME</h3> Home is where the heart is.. </div> <div class="content" id="menu1"> <h3>Menu 1</h3> Some text, blabla </div> <div class="content" id="menu2"> <h3>Menu 2</h3> Some other text. </div> <div class="content" id="menu3"> <h3>Menu 3</h3> Last tab. </div></div><script>$(document).ready(function() { $(document).foundation();})</script>

4、选项卡淡入

使用 CSS 来自定义选项卡淡入的效果：

实例

.tabs-content > .content.active { -webkit-animation: fadeEffect 1s; animation: fadeEffect 1s;}@-webkit-keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;}}@keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;}}

5、如果这条经验帮助了你，请给本经验点个赞并投上宝贵的一票