【jQuery】シンプルなHTML / jQueryの軽量タブプラグイン。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();
 
simple tabs

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

  • LATEST
  • RELATED
  • POPULAR