Foundation 选项卡

选项卡导航可以很好的展示不同的内容，并可以对内容进行切换。

选项卡使用

来创建, 各个选项使用
• 元素并加上.tab-title类来创建。

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

  实例

            
    
  选项卡
   
   
  Home
   
  Menu 1
   
  Menu 2
   
  Menu 3
   
    

  
  运行实例 »

  点击 "运行实例" 按钮查看在线实例

  ---

  垂直的选项卡

  垂直选项卡可以使用.vertical类:

  实例

            
    
  垂直选项卡
   
   
  Home
   
  Menu 1
   
  Menu 2
   
  Menu 3
   
    

  
  运行实例 »

  点击 "运行实例" 按钮查看在线实例

  ---

  切换选项卡

  如果要设置切换标签，可以使用

  元素加上.content类。每个选项卡上加上唯一的 ID, 并连接到列表项 (

  元素上，该

  元素需要添加.tabs-content类，并初始化 Foundation JS。

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

  实例

            
    
  切换选项卡
   
   
  主页
   
  菜单 1
   
  菜单 2
   
  菜单 3
   
   
   
   
  主页
   
  主页内容..
   
   
   
  菜单 1
   
  一些文本内容 1
   
   
   
  菜单 2
   
  一些文本内容 2
   
   
   
  菜单 3
   
  一些文本内容 3
   
   
      

  
  运行实例 »

  点击 "运行实例" 按钮查看在线实例

  ---

  选项卡淡入

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

  实例

             
    
  淡入切换选项卡
   
   
  主页
   
  菜单 1
   
  菜单 2
   
  菜单 3
   
   
   
   
  HOME
   
  首页内容。
   
   
   
  菜单 1
   
  文本内容。
   
   
   
  菜单 2
   
  文本内容。
   
   
   
  菜单 3
   
  文本内容。
   
   
      

  
  运行实例 »

  点击 "运行实例" 按钮查看在线实例

  ← Foundation 列表

  Foundation 分页→