Blog

2012.1203

タブ切り替え用JavaScript

タブ画像に_offという文字列がある場合、
マウスオーバーにて_onに変換し、クリックすると_inという文字列に変換します。
その際、aタグhrefに指定しているアンカー名の内容が表示されます。
jQuery等のライブラリは必要なく単独で動きます。

DEMO

DEMO

ダウンロード

DOWNLOAD

使用にあたっての注意

  1. 再配布はご遠慮くださいませ
  2. 改変は自由にしてくださって構いませんが、最上部にあるコメント部分は削除しないでください。
  3. このスクリプトを使用し、何らかの問題が発生しても一切責任は負いません。
  4. 使用に関しては自己責任でお願いいたします。
  5. ご要望、バグなどございましたらお問合せフォームまで

設置方法1

head要素内にtab.jsを読み込みます。

<script type="text/javascript" src="tab.js"></script>

設置方法2

下記を適当な場所へ記述してください。
※設定は「設定可能オプション」をご覧ください。

var tabchange = new ATTabChangeForImage({
	on : '_on',
	off : '_off',
	current : '_in',
	tabID : 'tabList'
});
tabchange.load();

設定可能オプション

on : ‘_on’
マウスオーバー用のタブ画像末尾の文字列
(初期値は_on、_onの場合この記述は必要ありません)

off : ‘_off’
マウスアウト用のタブ画像末尾の文字列
(初期値は_off、_offの場合この記述は必要ありません)

current : ‘_in’
クリック後用のタブ画像末尾の文字列
(初期値は_in、_inの場合この記述は必要ありません)

tabID : ‘tabList’
タブのID名
(初期値はtabList、tabListの場合この記述は必要ありません)

Page Top