参考URL
スタイルシート［CSS］/ボックス/表示・非表示を指定する - TAG index Webサイト
JavaScriptの基礎からはじめよう| 第1章 JavaScript導入ガイド | [Smart]
第21回 JavaScriptによるUIの実装：タブメニュー編：これでできる！ クロスブラウザJavaScript入門｜gihyo.jp … 技術評論社
JavaScriptの基礎からはじめよう| 第1章 JavaScript導入ガイド | [Smart]
本当のID と Class の違い | CSSPRO
CSSの使い方 マウスオーバー, クリックした時のリンクを設定する － Esprit's Style － エンジニアの足つぼ －
:link擬似クラス－スタイルシートリファレンス
:link擬似クラス－スタイルシートリファレンス
WEB色見本 原色大辞典 - HTMLカラーコード
【JavaScript】無名関数と即時関数？関数パターンを理解してメンテナブルなソースに！ | unitopi - ユニトピ -
初心者のためのJavaScript入門（7）：JavaScriptでDOMに挑戦 (2/2) - ＠IT
test.html
<!-- コメント--> <!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="author" content="pikesaku"> <meta name="keywords" content="python study"> <meta name="description" content="pike web"> <meta name="robots" content="all"> <meta http-equiv="content-language" content="ja"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <title>pike web site</title> <link rel="stylesheet" type="text/css" href="test.css"> </head> <body> <div id="top">top <div id="top_tabs"> <ul id="top_tabs_menu"> <li><a href="#page1">Page 1</a></li> <li><a href="#page2">Page 2</a></li> <li><a href="#page3">Page 3</a></li> </ul> </div> </div> <div id="side">side</div> <div id="main">main <div id="main_content"> <div id="page1"> Page 1 </div> <div id="page2"> Page 2 </div> <div id="page3"> Page 3 </div> </div> </div> </body> <script type="text/javascript" src="test.js"></script> </html>
test.css
/*コメント*/ html { height: 100%; margin: 0; } body { margin: 0; height: 100%; overflow: auto; } #top { height: 100px; background-Color: skyblue; overflow: auto; position: relative; } #side { float:left; width: 250px; background-Color: aliceblue; overflow: auto; height: 100%; } #main { overflow: auto; height: 100%; } #top_tabs { position: absolute; bottom: 0; left: 250px; margin: 0px; padding: 0px; } #top_tabs_menu { list-style-type: none; margin: 0px; padding: 0px; } #top_tabs_menu li { /*top_tabs_menuの中のli要素のみ対象 */ display: inline-block; /*inlineだとwidthが指定できない。inline-blockだと可能*/ margin: 0px; padding: 0px; width: 200px; } #top_tabs_menu li a { /*top_tabs_menu li要素のa要素のみ対象 */ text-decoration: none; display: block; /*これを付けないとテキストデータ部分しかリンクしない*/ padding: 5px; border-top-left-radius: 10px; border-top-right-radius: 10px; text-align: center; background: blue; font-weight: normal; color: white; } #top_tabs_menu li a:active { /*background: white;*/ font-weight: bold; color: black; } #main_content div { display: none; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
test.js
/*複数行コメント*/ //単一行コメント //一度しか実行しない関数は、以下記述が可能 //http://unitopi.com/js-function/ (function (){ var tab = document.getElementById('top_tabs_menu'); var links = tab.getElementsByTagName('a'); var current; for (var i = 0, l = links.length;i < l; i++){ tab_init(links[i], i); } function tab_init(link, index){ if (!current) { current = link; current.style.background = "white"; /* font-weightはハイフンを取って、次の文字を大きくするよう http://sterfield.co.jp/designer */ current.style.fontWeight = "bold"; current.style.color = "black"; document.getElementById('main_content').getElementsByTagName('div')[index].style.display = 'block'; } } link.onclick = function(){ current.page.style.display = 'none'; current.menu.className = ''; page.style.display = 'block'; link.className = 'active'; current.page = page; current.menu = link; return false; //これを付けないとリンクが動く=表示が変わるだけでなくタブ部分が一番上になる。クリックの効果を、return falseには表示を変えるだけにする効果があり。 }; })();
