▼すべてのタブコンテンツを非表示にし、クリックされたハッシュをIDとするタブコンテンツだけ表示
すべてのタブコンテンツを非表示にしておき、クリックしたa要素のハッシュを取得して、そのハッシュをIDを持つ要素だけを表示します。
[タブ1]をクリックした時に表示される、タブコンテンツです。
[タブ2]をクリックした時に表示される、タブコンテンツです。
[タブ3]をクリックした時に表示される、タブコンテンツです。
タブナビゲーションの数だけ、現在のウィンドウとa要素のハッシュをそれぞれ配列に格納しておき、クリックしたa要素のハッシュを取得して、そのハッシュのIDを持つ要素だけを表示します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>jQuery Tabs | 設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ /* 例1 */ // コンテンツを格納 var tabContainers = $('#exp1 > div'); $('#exp1 ul.tabnav a').click(function () { // すべてのタブコンテンツを非表示にし、 // クリックされたハッシュをIDとするタブコンテンツだけ表示 tabContainers.hide().filter(this.hash).show(); // 選択中のタブをハイライト表示 $('#exp1 ul.tabnav a').removeClass('selected'); $(this).addClass('selected'); return false; }).filter(':first').click(); // 最初のタブコンテンツだけ表示 /* 例2 */ // パス名格納用 var tabs = []; // ハッシュ格納用 var tabContainers2 = []; $('#exp2 ul.tabnav a').each(function () { // 現在のウィンドウのパス名を取得して配列に格納 // if (this.pathname == window.location.pathname) { tabs.push(this); // ハッシュを取得して配列に格納 tabContainers2.push($(this.hash).get(0)); // } }); $(tabs).click(function () { // すべてのタブコンテンツを非表示に // クリックされたハッシュをIDとするタブコンテンツだけ表示 $(tabContainers2).hide().filter(this.hash).show(); // 選択中のタブをハイライト表示 $(tabs).removeClass('selected'); $(this).addClass('selected'); return false; }).filter(':first').click(); // 最初のタブコンテンツだけ表示 }); </script> <!-- CSS --> <style type="text/css"> :focus { outline:0; } ul, li { margin:0; padding:0; list-style:none; } #exp1, #exp2 { margin:0 0 20px 0; padding:0; } ul.tabnav { overflow:hidden; } ul.tabnav li { display:inline; } ul.tabnav li a { padding:3px 7px; background-color:#ccc; color:#000; text-decoration:none; } ul.tabnav li a.selected, ul.tabnav li a:hover { background-color:#666; color:#fff; padding-top:7px; } div.tabs div { margin:0; padding:10px; background-color:#666; color:#fff; } div.tabs div h2 { margin:10px 0; } </style> <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head> <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1> <h3 class='h'>実行結果</h3> <div id="wrap"> <h1><a href='http://nettuts.com/javascript-ajax/create-a-tabbed-interface-using-jquery/'>Create A Tabbed Interface Using jQuery</a> | 設置サンプル</h1> <p>▼すべてのタブコンテンツを非表示にし、クリックされたハッシュをIDとするタブコンテンツだけ表示</p> <!-- CODE --> <h2>例1</h2> <p> すべてのタブコンテンツを非表示にしておき、クリックしたa要素のハッシュを取得して、そのハッシュをIDを持つ要素だけを表示します。 </p> <div class="tabs" id="exp1"> <ul class="tabnav"> <li><a href="#first">タブ1</a></li> <li><a href="#second">タブ2</a></li> <li><a href="#third">タブ3</a></li> </ul> <div id="first"> <h2>タイトル1</h2> <p>[タブ1]をクリックした時に表示される、タブコンテンツです。</p> </div> <div id="second"> <h2>タイトル2</h2> <p>[タブ2]をクリックした時に表示される、タブコンテンツです。</p> </div> <div id="third"> <h2>タイトル3</h2> <p>[タブ3]をクリックした時に表示される、タブコンテンツです。</p> </div> </div> <h2>例2</h2> <p> タブナビゲーションの数だけ、現在のウィンドウとa要素のハッシュをそれぞれ配列に格納しておき、クリックしたa要素のハッシュを取得して、そのハッシュのIDを持つ要素だけを表示します。 </p> <div class="tabs" id="exp2"> <ul class="tabnav"> <li><a href="#forth">タブ4</a></li> <li><a href="#fifth">タブ5</a></li> <li><a href="#sixth">タブ6</a></li> </ul> <div id="forth"> <h2>タイトル4</h2> <p>[タブ4]をクリックした時に表示される、タブコンテンツです。</p> </div> <div id="fifth"> <h2>タイトル5</h2> <p>[タブ5]をクリックした時に表示される、タブコンテンツです。</p> </div> <div id="sixth"> <h2>タイトル6</h2> <p>[タブ6]をクリックした時に表示される、タブコンテンツです。</p> </div> </div> <!-- / CODE --> </div> </body> </html>