jQueryを利用したタブメニューを設置

 タブメニューを紹介している海外サイトをピックアップで紹介したjQueryを利用したタブメニューを設置してみます。サンプルをダウンロードしてお使いください。
 jQueryを利用したタブメニューを設置してみます。タブは設定した間隔で自動に移動します。ソースはこれから紹介しますが画像やCSSファイルはサンプルファイルにあるのでダウンロードしてお使いください。

 body部分はこんな感じです。タブの数は自由に変更できます。
<div id="rotate">

 <ul>
  <li><a href="#fragment-1"><span>Section 1</span></a></li>
  <li><a href="#fragment-2"><span>Section 2</span></a></li>
  <li><a href="#fragment-3"><span>Section 3</span></a></li>
  <li><a href="#fragment-4"><span>Section 4</span></a></li>
  <li><a href="#fragment-5"><span>Section 5</span></a></li>
 </ul>

   <div id="fragment-1">Section 1の内容</div>
   <div id="fragment-2">Section 2の内容</div>
   <div id="fragment-3">Section 3の内容</div>
   <div id="fragment-4">Section 4の内容</div>
   <div id="fragment-5">Section 5の内容</div>

</div>
 JavaScriptはこんな感じです。外部ファイルは3つも読み込みます。「.tabs('rotate', 5000);」の部分を変更すると次のタブへ移動するまでの時間を変更できます。
<script src="jquery-1.2.3.pack.js" type="text/javascript"></script>
<script src="ui.tabs.pack.js" type="text/javascript"></script>
<script src="ui.tabs.ext.pack.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        $('#rotate > ul').tabs({ fx: { opacity: 'toggle' } }).tabs('rotate', 5000);
    });
</script> 
CSSはすべて外部化しています。ファイルはサンプルにありますのでダウンロードしてみてください。
<link rel="stylesheet" href="ui.tabs.css" type="text/css">
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
始めまして、jQueryのタブ実装の参考にさせていただいています。
1点お聞きしたいのですが、タブ内容の表示をajaxで読み込むことは可能でしょうか?
【2011/01/17 10:41】 | sinh #- | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加