Tabs

Tabs 包含了 .tab-nav 以及 .tab-content兩個主要區塊。每個 .tab-nav 的項目皆為 .tab-nav-item，Tabs 的連結為 .tab-link。

.tab-content 預設為 display: none;，當加上 .active 時才會顯示。另外，作用中的 .tab-nav-item 請加上 .active，如果你要使用 jQuery UI 的 Tabs 套件，那麼 .tab-content 與 .tab-nav-item 兩者都不需要使用 .active。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat voluptatem, earum libero ex vero quod consequuntur ullam facere voluptate, deserunt, odit enim. Laudantium enim libero, provident facilis et officiis officia, eligendi modi odit dolorem nulla. Laudantium, debitis, quos! Iure, sit!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum optio ea soluta sed non dolorem doloremque nemo veritatis dicta quaerat alias, reprehenderit impedit, eligendi vero sit, suscipit placeat dolorum, consequatur et. Quos, eligendi? Qui placeat, quos, illo nihil quaerat accusantium libero odit velit harum quam reprehenderit eius. Numquam doloribus dignissimos commodi nobis impedit tempora. Laborum placeat doloremque iste, architecto molestias vitae aliquam quisquam minima! Laboriosam esse, autem suscipit sapiente. Dolore, sequi et vel maiores iusto non quaerat ea a eos aut. Earum laudantium a at eligendi blanditiis hic sequi exercitationem voluptas deserunt, nobis reprehenderit, maxime consectetur, magni tempore harum non!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore dolores error, eaque quas vel harum officia, incidunt ipsa quo delectus repudiandae quidem suscipit commodi obcaecati explicabo aperiam non iste at consequuntur asperiores. Quod, et libero rerum deleniti in vel culpa, similique minus illum consequatur eveniet quas deserunt quidem iste natus quis. Et ducimus laudantium numquam explicabo adipisci ea, aspernatur vitae?

<div class="tab">
    <ul class="tab-nav">
        <li class="tab-nav-item active">
            <a href="#tab1" class="tab-link">Tab 1</a>
        </li>
        <li class="tab-nav-item">
            <a href="#tab2" class="tab-link">Tab 2</a>
        </li>
        <li class="tab-nav-item">
            <a href="#tab3" class="tab-link">Tab 3</a>
        </li>
    </ul>
    <div id="tab1" class="tab-content active">
        ~略~
    </div>
    <div id="tab2" class="tab-content">
        ~略~
    </div>
    <div id="tab3" class="tab-content">
        ~略~
    </div>
</div>