Foundation 选项卡 - 学习 Foundation 5 - 简单教程，简单编程

选项卡可以把一组相关的内容放在一起分类展示，并可以根据分类进行切换

Foundation 使用 <ul class="tabs" data-tab> 创建一个选项卡

各个选项使用 <li> 元素并加上 .tab-title 类来创建

.active 用于当前选中项

<ul class="tabs" data-tab>
    <li class="tab-title active"><a href="#">Home</a></li>
    <li class="tab-title"><a href="#">Menu 1</a></li>  
    <li class="tab-title"><a href="#">Menu 2</a></li>
    <li class="tab-title"><a href="#">Menu 3</a></li>
</ul>

运行范例 »

垂直的选项卡

在 <ul> 上添加 .vertical CSS 类可以设置垂直选项卡

<ul class="tabs vertical" data-tab>

运行范例 »

切换选项卡

如果要设置切换标签

首先在 <div> 元素加上 .content CSS 类
其次在每个选项卡上加上唯一的 ID, 并连接到列表项 ( <a href="#menu1" 将打开 id="menu1" 的选项内容)
再次将所有的选项内容放在 <div> 元素上，该 <div> 元素需要添加 .tabs-content CSS 类
最后初始化 Foundation JS

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

<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>
        <p>Home is where the heart is..</p>  
    </div>
    <div class="content" id="menu1">
        <h3>Menu 1</h3>
        <p>Some text, blabla</p>
    </div>
    <div class="content" id="menu2">
        <h3>Menu 2</h3>
        <p>Some other text.</p>
    </div>
    <div class="content" id="menu3">
        <h3>Menu 3</h3>
        <p>Last tab.</p>
    </div>
</div>

<script>
$(document).ready(function() {$(document).foundation();})
</script>

运行范例 »

选项卡淡入动画

可以使用 CSS3 关键帧动画来自定义选项卡淡入的效果

<style>
.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;}
}
</style>

运行范例 »