2017年10月19日

工藤

様々なタブの切り替えを簡単に実装！Tabsletを使おう

マークアップ

facebook
twitter

割と使うタブの切り替え。
単純なものであれば自分でもコードを覚えれば書けないこともないのですがもうちょっと様々な効果を使ってみたい…なんて時もあります。
そんな時に役立つのが『Tabslet』です。

1 使い方

使い方

とりあえずダウンロードしましょう。下記サイトから『DOWNLOAD』ボタンでダウンロードしてください。

Tabslet

ダウンロード後はcssとjsを読み込ませます。
ダウンロードしたフォルダにある『jquery.tabslet.js』とdemo＞stylesheetsフォルダ内の『styles.css』を読み込ませましょう。

<link href="./css/basic.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="./js/jquery.tabslet.js"></script>

cssは読み込ませた後に自分で修正などしたりするのが無難かと思います。

読み込ませたら以下のようにカスタマイズしてみましょう。

通常のタブ

<script>
$(document).ready(function() {
	$('.tabs_default').tabslet();
});
</script>

  <div class="tabs tabs_default">
    <ul class="horizontal">
      <li><a href="#tab-1">tab1</a></li>
      <li><a href="#tab-2">tab2</a></li>
      <li><a href="#tab-3">tab3</a></li>
    </ul>
    <div id="tab-1"><span>tab 1（デフォルトのタブです）</span></div>
    <div id="tab-2"><span>tab 2</span></div>
    <div id="tab-3"><span>tab 3</span></div>
  </div>

$(document).ready(function() {

$('.tabs_default').tabslet();

});

</script>

</ul>

<div id="tab-1"><span>tab 1（デフォルトのタブです）</span></div>

</div>

DEMO

ごくごく普通のタブです。
とりあえずTabsletは

タブ部分にidを振る
ボタンになるところにタブのidをリンクさせる
上記2つをクラスを付けたdiv等で囲い、そこにスクリプトの指定を行う

でタブとして動いてくれます。

アクティブの指定をデフォルトでする

<script>
$(document).ready(function() {
	$('.tabs_active').tabslet({
		active: 2
	});
});
</script>

  <div class="tabs tabs_active">
    <ul class="horizontal">
      <li><a href="#tab-4">tab1</a></li>
      <li><a href="#tab-5">tab2</a></li>
      <li><a href="#tab-6">tab3</a></li>
    </ul>
    <div id="tab-4"><span>tab 1</span></div>
    <div id="tab-5"><span>tab 2（デフォルトのタブです）</span></div>
    <div id="tab-6"><span>tab 3</span></div>
  </div>

$(document).ready(function() {

$('.tabs_active').tabslet({

active: 2

});

</script>

</ul>

<div id="tab-5"><span>tab 2（デフォルトのタブです）</span></div>

</div>

DEMO

該当の数字を指定するとタブをデフォルトを1番目以外にできます。
今回は『active: 2』を指定することで2番目のタブをデフォルトで最初に表示してくれています。

hoverだけで開くタブ

<script>
	$('.tabs_hover').tabslet({
		mouseevent: 'hover',
		attribute: 'href',
		animation: false
	});
</script>

  <div class="tabs tabs_hover">
    <ul class="horizontal">
      <li><a href="#tab-7">tab1</a></li>
      <li><a href="#tab-8">tab2</a></li>
      <li><a href="#tab-9">tab3</a></li>
    </ul>
    <div id="tab-7"><span>tab 1（デフォルトのタブです）</span></div>
    <div id="tab-8"><span>tab 2</span></div>
    <div id="tab-9"><span>tab 3</span></div>
  </div>

$('.tabs_hover').tabslet({

mouseevent: 'hover',

attribute: 'href',

animation: false

});

</script>

</ul>

<div id="tab-7"><span>tab 1（デフォルトのタブです）</span></div>

</div>

DEMO

マウスをのせるだけで開いてくれるタブを実装できます。
ちなみに『attribute: ‘href’』の記述があるのでこれを使用するとクリックをした時にはURLに直接idを振ってくれます。

タブにフェードのアニメーションを付ける

<script>
	$('.tabs_animate').tabslet({
		mouseevent: 'click',
		attribute: 'href',
		animation: true
	});
</script>

<div class="tabs tabs_animate">
    <ul class="horizontal">
      <li><a href="#tab-10">tab1</a></li>
      <li><a href="#tab-11">tab2</a></li>
      <li><a href="#tab-12">tab3</a></li>
    </ul>
    <div id="tab-10"><span>tab 1（デフォルトのタブです）</span></div>
    <div id="tab-11"><span>tab 2</span></div>
    <div id="tab-12"><span>tab 3</span></div>
  </div>

$('.tabs_animate').tabslet({

mouseevent: 'click',

attribute: 'href',

animation: true

});

</script>

</ul>

<div id="tab-10"><span>tab 1（デフォルトのタブです）</span></div>

</div>

DEMO

この方法でタブにフェードのアニメーションを付けながら切り替えることができます。

自動でタブを切り替える

<script>
	$('.tabs_rotate').tabslet({
		autorotate: true,
		delay: 3000
	});
</script>

  <div class="tabs tabs_rotate">
    <ul class="horizontal">
      <li><a href="#tab-13">tab1</a></li>
      <li><a href="#tab-14">tab2</a></li>
      <li><a href="#tab-15">tab3</a></li>
    </ul>
    <div id="tab-13"><span>tab 1（デフォルトのタブです）</span></div>
    <div id="tab-14"><span>tab 2</span></div>
    <div id="tab-15"><span>tab 3</span></div>
  </div>

$('.tabs_rotate').tabslet({

autorotate: true,

delay: 3000

});

</script>

</ul>

<div id="tab-13"><span>tab 1（デフォルトのタブです）</span></div>

</div>

DEMO

自動でタブを切り替えることができます。
delayの値を変更することで速度も変えることができます。

コントローラーを付ける

<script>
	$('.tabs_controls').tabslet({
		controls: {
		prev: '.prev',
		next: '.next'
  		}
	});	
</script>

  <div class="tabs tabs_controls">
	  <a class="prev">previous</a>
	  <a class="next">next</a>
	  <span class="clear"></span>
    <ul class="horizontal">
      <li><a href="#tab-16">information</a></li>
      <li><a href="#tab-17">tab</a></li>
      <li><a href="#tab-18">tab</a></li>
    </ul>
    <div id="tab-16"><span>Tab 1</span></div>
    <div id="tab-17"><span>Tab 2</span></div>
    <div id="tab-18"><span>Tab 3</span></div>
  </div>

$('.tabs_controls').tabslet({

controls: {

prev: '.prev',

next: '.next'

}

});

</script>

<a class="prev">previous</a>

<li><a href="#tab-16">information</a></li>

</ul>

</div>

DEMO

コントローラーを付けることができます。
prevなどに該当のボタンのクラスを指定させてください。

タブの切り替え時にアラートをだす

<script>
	$('.before_event').tabslet();
	$('.before_event').on("_before", function() {
		alert('タブを切り替えます！')
	});
</script>

 <div class="tabs before_event">
    <ul class="horizontal">
      <li><a href="#tab-19">tab1</a></li>
      <li><a href="#tab-20">tab2</a></li>
      <li><a href="#tab-21">tab3</a></li>
    </ul>
    <div id="tab-19"><span>tab 1（デフォルトのタブです）</span></div>
    <div id="tab-20"><span>tab 2</span></div>
    <div id="tab-21"><span>tab 3</span></div>
  </div>

$('.before_event').tabslet();

$('.before_event').on("_before", function() {

alert('タブを切り替えます！')

});

</script>

</ul>

<div id="tab-19"><span>tab 1（デフォルトのタブです）</span></div>

</div>

DEMO

タブの切り替え時にアラートをだすことができます。
alert()内のテキストは好きに変更してください。

タブの切り替え後にアラートをだす

<script>
	$('.after_event').tabslet({
		animation: true
	});
	$('.after_event').on("_after", function() {
		alert('タブを切り替えました！')
	});
</script>

  <div class="tabs after_event">
    <ul class="horizontal">
      <li><a href="#tab-22">tab1</a></li>
      <li><a href="#tab-23">tab2</a></li>
      <li><a href="#tab-24">tab3</a></li>
    </ul>
    <div id="tab-22"><span>tab 1（デフォルトのタブです）</span></div>
    <div id="tab-23"><span>tab 2</span></div>
    <div id="tab-24"><span>tab 3</span></div>
  </div>

$('.after_event').tabslet({

animation: true

});

$('.after_event').on("_after", function() {

alert('タブを切り替えました！')

});

</script>

</ul>

<div id="tab-22"><span>tab 1（デフォルトのタブです）</span></div>

</div>

DEMO

こちらはタブの切り替え後にアラートを出すことができます。
alert()内のテキストは好きに変更してください。

執筆者：工藤[ WEBデザイナー ]

WEBデザイナー。最近はWordPressを触るのが好きです。よろしくお願いします。

プログラミング

SharePointではできないこと 4選

「これってSharePointでできないの!?」なんていう瞬間、開発やカスタマイズの現場では意外と多くあります。SharePointはとても柔軟なプラットフォームですが、実は“万能ツール”ではありません。「コードを書けば何とかなる」と思って構築を進めると、モダンページの仕様や制限に阻まれて苦い思いをすることもしばしば。今回は、実際のプロジェクトや運用の中で見えてきた「SharePointではできないこと」をまとめて紹介します。目次1 1.CSSとJSが直接使えない1.1 ク […]

2025年10月10日

Webサイト制作

WordPress納品後にクライアントが安心して運用できる仕組みづくりをしよう

ホームページ制作において、更新機能を手軽に導入できるのがWordPressです。専門知識がなくても記事の投稿やページ編集を行いやすい一方で、クライアントが自分で運用するには、が欠かせません。今回は、そのための仕組みづくりについてご紹介します。制作側の方はもちろん、クライアント側でホームページ運用を担当される方も、制作時のご相談などにぜひ参考にしてみてください。目次1 管理画面のロゴを企業ロゴに変更する2 管理画面のURLを変更する・認証などを付けてセキュリティ面を強化 […]

2025年10月3日

Webデザイン

アプリのロゴアニメーションをAfter Effectsで作成→Lottieに変換【iOS/Android対応】

こちらは、当社でリリースしたアプリ「ピンピタ」で使用しているロゴアニメーションです。スプラッシュ画面でロゴが動くと、ぐっとアプリらしい印象になりますし、作ってみたいですよね。今回は、After Effects（以降AE）でロゴアニメーションを作成し、アプリに組み込むまでをご紹介します。 AEと聞くと難しい印象がありますが、PremiereやFlashなどを触った経験がある方なら、すぐに慣れます。もう一度再生目次1 作業フロー1.1 注意点：グラデーションが使用不可2 […]

2025年9月19日

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。

Web制作、Webサービスに関する技術やノウハウを発信するコラムサイト

様々なタブの切り替えを簡単に実装！Tabsletを使おう

使い方

通常のタブ

アクティブの指定をデフォルトでする

hoverだけで開くタブ

タブにフェードのアニメーションを付ける

自動でタブを切り替える

コントローラーを付ける

タブの切り替え時にアラートをだす

タブの切り替え後にアラートをだす

関連記事

SharePointではできないこと 4選

WordPress納品後にクライアントが安心して運用できる仕組みづくりをしよう

アプリのロゴアニメーションをAfter Effectsで作成→Lottieに変換【iOS/Android対応】