« テーブルの値を検索してくれるプラグイン「jQuery quickSearch」 #jQuery | トップページ | CSS3とjQueryを使った背景画像をアニメーションするボタン »

2011年6月 6日 (月)

タブの切り替えが出来るJavaScript「SimpleTabs」

jQueryを使わなくてもタブの切り替えができるJavaScript「SimpleTabs」をご紹介します。

使用するリソース
simpletabs_1.3.packed.js
simpletabs.css

head要素への記入
<script language="javascript" type="text/javascript" src="フォルダ名/simpletabs_1.3.packed.js"></script>
<link type="text/css" rel="stylesheet" href="フォルダ名/simpletabs.css"/>

htmlへの記述方法(例)
<div class="simpleTabs">
    <ul class="simpleTabsNavigation">
        <li><a href="#">タブ1</a></li>
        <li><a href="#">タブ2</a></li>
        <li><a href="#">タブ3</a></li>
    </ul>
    <div class="simpleTabsContent">タブ1に表示したい内容を記述します。</div>
    <div class="simpleTabsContent">タブ2に表示したい内容を記述します。</div>
    <div class="simpleTabsContent">タブ3に表示したい内容を記述します。</div>
</div>

タブの数を増やしたい場合には、対応するliタグとdivタグを追加すればokです。

|

« テーブルの値を検索してくれるプラグイン「jQuery quickSearch」 #jQuery | トップページ | CSS3とjQueryを使った背景画像をアニメーションするボタン »

JavaScript」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1378074/40251593

この記事へのトラックバック一覧です: タブの切り替えが出来るJavaScript「SimpleTabs」:

« テーブルの値を検索してくれるプラグイン「jQuery quickSearch」 #jQuery | トップページ | CSS3とjQueryを使った背景画像をアニメーションするボタン »