pikesaku’s blog

個人的なプログラム勉強メモです。記載内容について一切の責任は持ちません。

JavaScript勉強(道は遠い。。。。)

参考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には表示を変えるだけにする効果があり。
  };

})();


f:id:pikesaku:20160807200435p:plain