tryfoundation_tabs_toggable 在线代码实例

 <h2>切换选项卡</h2>

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