# Foundation 選項卡 選項卡導航可以很好的展示不同的內容，并可以對內容進行切換。  選項卡使用 `&lt;ul class="tabs" data-tab&gt;` 來創建, 各個選項使用 &lt;li&gt; 元素并加上 `.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> ``` ## 垂直的選項卡 垂直選項卡可以使用 `.vertical` 類: ### 實例 ``` <ul class="tabs vertical" data-tab> ``` ## 切換選項卡 如果要設置切換標簽，可以使用 &lt;div&gt; 元素加上 `.content` 類。每個選項卡上加上唯一的 ID, 并連接到列表項 (&lt;a href="#menu1" 將打開 id="menu1" 的選項內容)。最后將所有的選項內容放在 `&lt;div&gt;` 元素上，該 `&lt;div&gt;` 元素需要添加 `.tabs-content` 類，并初始化 Foundation JS。 注意 `.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> ??? <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> <!-- Initialize Foundation JS --> <script> $(document).ready(function() { ??? $(document).foundation(); }) </script> ``` ## 選項卡淡入 使用 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;} } ```