jQuery

【jQuery】シンプルなHTML / jQueryの軽量タブプラグイン。Simple Tabs

October 17, 2016
simple tabs

Simple TabsはシンプルなHTML / jQueryの軽量タブプラグイン。

Markup

コンテナ作成

<div class="simple-tabs">
    -- content will go here --
</div>

タブナビゲーションを作成

<ul class="simple-tab--nav">
    <li class="active"><a href="#">Tab One</a></li>
    <li><a href="#">Tab Two</a></li>
    <li><a href="#">Tab Three</a></li>
</ul>
<ul class="simple-tab--panels">
    <li class="simple-tab--panel active">
        <h2>Tab 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis felis lectus, eu molestie metus dictum in. Morbi a nulla id orci vehicula viverra. Aenean arcu nulla, convallis et quam vitae, vestibulum tempor lorem.</p>
    </li>
    <li class="simple-tab--panel">
        <h2>Tab 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis felis lectus, eu molestie metus dictum in. Morbi a nulla id orci vehicula viverra. Aenean arcu nulla, convallis et quam vitae, vestibulum tempor lorem.</p>
    </li>
    <li class="simple-tab--panel">
        <h2>Tab 3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis felis lectus, eu molestie metus dictum in. Morbi a nulla id orci vehicula viverra. Aenean arcu nulla, convallis et quam vitae, vestibulum tempor lorem.</p>
    </li>
</ul>

JS

$('.simple-tabs').simple_tabs();