内容が表示されない

左図上のように内容が表示されません
宜しくお願い致します。

javascript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>Tab Menu Sample</title>
6  <style>
7  body {
8    padding: 0;
9    margin: 0;
10    font-family: Verdana, sans-serif;
11  }
12  .container {
13    padding: 0;
14    margin: 30px auto;
15    width: 500px;
16    background: #dce0e0;
17  }
18  ul.menu {
19    list-style: none;
20    padding: 0;
21    margin: 0;
22    font-size: 0;
23  }
24  ul.menu li {
25    display: inline-block;
26  }
27  ul.menu li a {
28    display: inline-block;
29    font-size: 14px;
30    width: 80px;
31    height: 20px;
32    line-height: 20px;
33    text-align: center;
34    text-decoration: none;
35    padding: 7px;
36    color: #333;
37  }
38  ul.menu li a.active {
39    background: #353d3e;
40    color: #fff;
41  }
42  ul.menu li a:not(.active):hover {
43    opacity: 0.5;
44    transition: .8s;
45  }
46  .content {
47    font-size: 14px;
48    padding: 7px 10px;
49    line-height: 1.4;
50    background: #353d3e;
51    color: #fff;
52    min-height: 150px;
53    display: none;
54  }
55  .content.active {
56    display: block;
57  }
58  </style>
59</head>
60<body>
61  <div class="container">
62    <ul class="menu">
63      <li><a href="#" data-id="about" class="active menu_item">About</a></li>
64      <li><a href="#" data-id="service" class="menu_item">Service</a></li>
65      <li><a href="#" data-id="contact" class="menu_item">Contact</a></li>
66    </ul>
67    <div class="content active" id="about">
68      about about about about about about about about about about about about about about about about about about about about about about about about about about about about about about about about about about about about about about about
69    </div>
70    <div class="content" id="service">
71      service service service service service service service service service service service service service service service service service service service service service service service service service service
72    </div>
73    <div class="content" id="contact">
74      contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact
75    </div>
76  </div>
77  <script>
78  (function() {
79    'use strict';
80
81    var menuItems = document.getElementsByClassName('menu_item');
82    var contents = document.getElementsByClassName('content');
83
84    var i;
85
86    for (i = 0; i < menuItems.length; i++) {
87      menuItems[i].addEventListener('click', function(e) {
88        e.preventDefault();
89
90        var i;
91
92        for (i = 0; i < menuItems.length; i++) {
93          menuItems[i].className = 'menu_item';
94        }
95
96        this.className = 'menu_item active';
97
98        for (i = 0; i < contents.length; i++) {
99          contents[i].className = 'content';
100        }
101
102        document.getElementByID(this.dataset.id).className = 'content active' ;
103      });
104    }
105
106  })();
107  </script>
108</body>
109</html>
110

行動規範の内容に同意します

回答2件

エラーを確認されたほうが良いです。

【開発者ツールを使おう！カスタマイズするphpファイルを探す-その1 | RYUS blog】
http://ryus.co.jp/blog/customize-php-search-1/

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

【Chrome デベロッパーツールの使い方概要 | Web Tips】
http://weback.net/utility/1410/

投稿2017/04/05 17:38

kei344

総合スコア69407

goforward

2017/04/05 17:45

ありがとうございます。今この授業していますし、エラーの原因や開発に利用したいので、わたくしも注目しておりました。パソコン堪能ではありませんが少しずつやらせていただきます。

goforward

2017/04/05 17:49

html css css3 js jquery などは後二日で終わらせ、phpとjavaに力をいれたいです。 phpのソースは表示されませんが今javaはアプリなどで表示する方法を調べています。あとオブジェクト指向は再利用ですのでライブラリーも探しております。なるべくはやく作りたいですし、次々と作りたいので

goforward

2017/04/05 17:56

これらを見ているともちろんゼロから作る必要もなければ作ってもすぐに真似されますね。授業で学ぶ意味やeditorでゼロから打つ意味もなくなっていますね。時間はありませんので、考えさせていただきます

goforward

2017/04/05 17:57

参考にさせていただきます

kei344

2017/04/05 18:30

> html css css3 js jquery などは後二日で終わらせ無理です。今あせっても何も身に付かないまま次々質問することになるだけなので、今後の時間の無駄が増えるだけです。 > 授業で学ぶ意味やeditorでゼロから打つ意味もなくなっていますね。その意味が無い、と思っているのであれば、まだ学べていません。初学者のようなので厳し目に言いますが、急ぐのであれば丁寧に基礎から固めるのが良いです。今あせって良いことなど一つもありません。

行動規範の内容に同意します

ベストアンサー

getElementByIDではなくて、getElementByIdです。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>Tab Menu Sample</title>
6    <style>
7        body {
8            padding: 0;
9            margin: 0;
10            font-family: Verdana, sans-serif;
11        }
12
13        .container {
14            padding: 0;
15            margin: 30px auto;
16            width: 500px;
17            background: #dce0e0;
18        }
19
20        ul.menu {
21            list-style: none;
22            padding: 0;
23            margin: 0;
24            font-size: 0;
25        }
26
27        ul.menu li {
28            display: inline-block;
29        }
30
31        ul.menu li a {
32            display: inline-block;
33            font-size: 14px;
34            width: 80px;
35            height: 20px;
36            line-height: 20px;
37            text-align: center;
38            text-decoration: none;
39            padding: 7px;
40            color: #333;
41        }
42
43        ul.menu li a.active {
44            background: #353d3e;
45            color: #fff;
46        }
47
48        ul.menu li a:not(.active):hover {
49            opacity: 0.5;
50            transition: .8s;
51        }
52
53        .content {
54            font-size: 14px;
55            padding: 7px 10px;
56            line-height: 1.4;
57            background: #353d3e;
58            color: #fff;
59            min-height: 150px;
60            display: none;
61        }
62
63        .content.active {
64            display: block;
65        }
66    </style>
67</head>
68<body>
69<div class="container">
70    <ul class="menu">
71        <li><a href="#" data-id="about" class="active menu_item">About</a></li>
72        <li><a href="#" data-id="service" class="menu_item">Service</a></li>
73        <li><a href="#" data-id="contact" class="menu_item">Contact</a></li>
74    </ul>
75    <div class="content active" id="about">
76        about about about about about about about about about about about about about about about about about about
77        about about about about about about about about about about about about about about about about about about
78        about about about
79    </div>
80    <div class="content" id="service">
81        service service service service service service service service service service service service service service
82        service service service service service service service service service service service service
83    </div>
84    <div class="content" id="contact">
85        contact contact contact contact contact contact contact contact contact contact contact contact contact contact
86        contact contact contact contact contact contact contact contact contact
87    </div>
88</div>
89<script>
90    (function () {
91        'use strict';
92
93        var menuItems = document.getElementsByClassName('menu_item');
94        var contents = document.getElementsByClassName('content');
95
96        var i;
97
98        for (i = 0; i < menuItems.length; i++) {
99            menuItems[i].addEventListener('click', function (e) {
100                e.preventDefault();
101
102                var i;
103
104                for (i = 0; i < menuItems.length; i++) {
105                    menuItems[i].className = 'menu_item';
106                }
107
108                this.className = 'menu_item active';
109
110                for (i = 0; i < contents.length; i++) {
111                    contents[i].className = 'content';
112                }
113
114                document.getElementById(this.dataset.id).className = 'content active';
115            });
116        }
117
118    })();
119</script>
120</body>
121</html>