▼ナビゲーション部分はコンテンツ内の特定の要素(例えばh3要素)の内容を取得して自動的に生成しています。
[タブ1]をクリックした時に表示されます。
[タブ2]をクリックした時に表示されます。
[タブ3]をクリックした時に表示されます。
<!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: Ein Tab-Plugin selber schreiben | 設置サンプル</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($){ $.fn.tabs = function(options) { var defaults = { container: '#tabcontent', tabtitle: 'h1' }; var options = $.extend(defaults, options); var list = $("<ul>"); var target = $(options.container); target.children("div").hide(); target.children("div:first").show(); target.children("div").each(function(i){ var heading = $(this).children(options.tabtitle+":first").text(); var targetid = $(this).attr("id"); if(heading == "") heading = i; var listitem = $("<li><a href='#"+targetid+"'>"+heading+"</a></li>"); listitem.click(function(){ target.children("div").hide(); $("#"+targetid).show(); return false; }); list.append(listitem); }); $(this).append(list); }; })(jQuery); $(function(){ $("#tabnav").tabs({ container: '#tabcontent', tabtitle: 'h3' }); }); </script> <!-- CSS --> <style type="text/css"> ul,li { margin:0; padding:0; list-style:none; } /* navigation */ #tabnav li { float:left; margin-right:5px; } #tabnav li a { padding:5px 15px; display:block; background:#ddd; } /* content */ #tabcontent { clear:both; border:1px solid #ddd; width:500px; } #tabcontent div { background:#eee; padding:20px; </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://ugotit.de/2009/03/02/jquery-ein-tab-plugin-selber-schreiben/'>jQuery: Ein Tab-Plugin selber schreiben</a> | 設置サンプル</h1> <p>▼ナビゲーション部分はコンテンツ内の特定の要素(例えばh3要素)の内容を取得して自動的に生成しています。 </p> <!-- CODE --> <div id="tabnav"></div> <div id="tabcontent"> <div id="tab1"> <h3>タブ1</h3> <p> [タブ1]をクリックした時に表示されます。 </p> </div> <div id="tab2"> <h3>タブ2</h3> <p> [タブ2]をクリックした時に表示されます。 </p> </div> <div id="tab3"> <h3>タブ3</h3> <p> [タブ3]をクリックした時に表示されます。 </p> </div> </div> <!-- / CODE --> </div> </body> </html>