Foundation 选项卡

前言

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

1、选项卡

• 选项卡使用 <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>

• 效果 🔗

  

2、垂直的选项卡

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

• 实例

  <ul class="tabs vertical" 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>

• 效果 🔗

  

3、切换选项卡

• 如果要设置切换标签，可以使用 <div> 元素加上 .content 类。每个选项卡上加上唯一的 ID, 并连接到列表项 (<a href="#menu1"> 将打开 id="menu1" 的选项内容)。最后将所有的选项内容放在 <div> 元素上，该 <div> 元素需要添加 .tabs-content 类，并初始化 Foundation JS。

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

• 实例

  <ul class="tabs" data-tab="">
      <li class="tab-title"><a href="#home" aria-selected="false" tabindex="-1">主页</a></li>
      <li class="tab-title"><a href="#menu1" aria-selected="false" tabindex="-1">菜单 1</a></li>
      <li class="tab-title active"><a href="#menu2" aria-selected="true" tabindex="0">菜单 2</a></li>
      <li class="tab-title"><a href="#menu3" aria-selected="false" tabindex="-1">菜单 3</a></li>
  </ul>
  <div class="tabs-content">
      <div class="content" id="home" aria-hidden="true" tabindex="-1">
          <h3>主页</h3>
          <p>主页内容..</p>
      </div>
      <div class="content" id="menu1" aria-hidden="true" tabindex="-1">
          <h3>菜单 1</h3>
          <p>一些文本内容 1</p>
      </div>
      <div class="content active" id="menu2" aria-hidden="false">
          <h3>菜单 2</h3>
          <p>一些文本内容 2</p>
      </div>
      <div class="content" id="menu3" aria-hidden="true" tabindex="-1">
          <h3>菜单 3</h3>
          <p>一些文本内容 3</p>
      </div>
  </div>
  
  <!-- 初始化 Foundation JS -->
  <script>
       $(document).ready(function () {
          $(document).foundation();
       })
  </script>

• 效果 🔗

  

4、选项卡淡入

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

• 实例

  <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>

• 效果 🔗