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 REST APIを使用してリストの情報を取得し、headerにナビを作る

SharePointで作成したリストの情報をREST APIを使用して取得してみましょう。今回は、APIで取得した情報を、headerにリンクとして差し込んでみます。サイト全体共通のナビでも、リストを使用すると、一か所で管理できるので便利です。目次1 前提条件2 1.REST APIで情報を取得2.1 REST APIのURL2.2 データを取得する処理3 2.取得した情報をheaderに表示前提条件 SharePoint Online モダンUI カスタムJSが使用で […]

2025年3月26日

WordPress

WordPressで権限やユーザーごとに管理画面のサイドメニュー表示を切り分ける

デフォルトだといろいろな項目が表示されているWordPressの管理画面のサイドメニュー。慣れていない人にはわかりづらいですよね。また、権限によってデフォルトで非表示にしてくれたりもしますが、この部分は見せたくないな…ということも多いと思います。今回はWordPressで権限やユーザーごとにサイドメニューの表示を変更する方法をご紹介します。目次1 権限の種類について2 function.phpに記述する2.1 サイドメニューの非表示用のコード2.2 権限ごとに振り分け […]

2025年3月26日

プログラミング

jQuery+PHPで大容量ファイルを分割アップロードするお話

ファイルのアップロードを行う際に注意しないといけないのが「アップロード容量」と「タイムアウト」です。どちらもサーバーの設定に関わるところでレンタルサーバーでは対処しきれないところもあり、大容量にするとそれだけアップロードに時間がかかりタイムアウトが発生しやすくなります。そこでフロント側で分割してファイルをアップし、バックエンド側で受け取った後に結合するようにするとよいでしょう注意すべき点として通常のPOSTでの送信ではないため、あらかじめそこら辺を考慮した処理が必要とな […]

2025年2月20日

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

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

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

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

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

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

使い方

通常のタブ

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

hoverだけで開くタブ

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

自動でタブを切り替える

コントローラーを付ける

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

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

関連記事

SharePoint REST APIを使用してリストの情報を取得し、headerにナビを作る

WordPressで権限やユーザーごとに管理画面のサイドメニュー表示を切り分ける

jQuery+PHPで大容量ファイルを分割アップロードするお話