変わらない原因

左図上のマウスはcontactの上にあるのですが（screenshotでは写っていない）contact上にマウスをおいても左図下のようにその場所が黒くなるのですがなりません。宜しくお願い致します。
リンク内容

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
59  </style>
60</head>
61<body>
62  <div class="container">
63    <ul class="menu">
64      <li><a href="#" class="active menu_item">About</a></li>
65      <li><a href="#"class="menu_item">Service</a></li>
66      <li><a href="#"class="menu_item">Contact</a></li>
67    </ul>
68    <div class="content active" id="about">
69      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
70    </div>
71    <div class="content" id="service">
72      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
73    </div>
74    <div class="content" id="contact">
75      contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact
76    </div>
77  </div>
78  <script>(function() {
79    'use strict';
80
81    var menuItems = document.getElementsClassName('menu_item');
82
83    var i;
84
85    for (i = 0; i < menuItems.length; i++) {
86      menuItems[i].addEventListener('click', function(e) {
87        e.preventDefault();
88
89        var i;
90
91        for (i = 0; i < menuItems.length; i++) {
92          menuItems[i].className = 'menu_item';
93        }
94
95        this.className = 'menu_item active';
96
97
98
99      });
100    }
101  })();
102
103  </script>
104</body>
105</html>
106

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

回答1件

ベストアンサー

getElementsClassNameではなくてgetElementsByClassNameです。

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
67    </style>
68</head>
69<body>
70<div class="container">
71    <ul class="menu">
72        <li><a href="#" class="active menu_item">About</a></li>
73        <li><a href="#" class="menu_item">Service</a></li>
74        <li><a href="#" class="menu_item">Contact</a></li>
75    </ul>
76    <div class="content active" id="about">
77        about about about about about about about about about about about about about about about about about about
78        about about about about about about about about about about about about about about about about about about
79        about about about
80    </div>
81    <div class="content" id="service">
82        service service service service service service service service service service service service service service
83        service service service service service service service service service service service service
84    </div>
85    <div class="content" id="contact">
86        contact contact contact contact contact contact contact contact contact contact contact contact contact contact
87        contact contact contact contact contact contact contact contact contact
88    </div>
89</div>
90<script>
91    (function () {
92        'use strict';
93        var menuItems = document.getElementsByClassName('menu_item');
94        var i;
95        for (i = 0; i < menuItems.length; i++) {
96            menuItems[i].addEventListener('click', function (e) {
97                e.preventDefault();
98                var i;
99                for (i = 0; i < menuItems.length; i++) {
100                    menuItems[i].className = 'menu_item';
101                }
102                this.className = 'menu_item active';
103            });
104        }
105    })();
106</script>
107</body>
108</html>