JavaScriptでタブメニューを作成

###前提・実現したいこと
JavaScriptでタブメニューを作成しているのですが、うまく連動させることができません。
数字1,2,3をクリックするとそれに対応するA,B,C以外にclassのhiddenをつけるようにし、対応するもののみ表示させるようにしています。

###発生している問題・エラーメッセージ

index.html:47 Uncaught TypeError: Cannot read property 'classList' of undefined

###該当のソースコード

html
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6<meta name="format-detection" content="telephone=no">
7<title></title>
8<link rel="stylesheet" href="css/reset.css">
9<link rel="stylesheet" href="css/base.css">
10<link rel="stylesheet" href="css/style.css">
11</head>
12<body>
13<div class="wrapper">
14    <ul class="nav">
15        <li>1</li>
16        <li>2</li>
17        <li>3</li>
18    </ul>
19    <ul class="contents">
20        <li>A</li>
21        <li class="hidden">B</li>
22        <li class="hidden">C</li>
23    </ul>
24</div>
25</body>
26</html>

javascript
1<script type="text/javascript" src="js/jquery.js"></script>
2<script type="text/javascript">
3
4    var nav = document.getElementsByClassName("nav"),
5        nav_menu = nav[0].children,
6        contents = document.getElementsByClassName("contents"),
7        con_menu = contents[0].children;
8
9    console.log(nav);
10    console.log(nav_menu);
11    console.log(contents);
12    console.log(con_menu);
13
14    for(var i = 0 ; i < nav_menu.length ; i++){
15        nav_menu[i].onclick = function(){
16            display(i);
17        }
18    }
19
20    function display(a){
21        for(var j = 0 ; con_menu.length ; j++){
22            con_menu[j].classList.add("hidden");
23        }
24
25        con_menu[a].classList.remove("hidden");
26    }
27
28</script>

###補足情報(言語/FW/ツール等のバージョンなど)
まだあまりJSに関して分かっていないので、分かりやすいアドバイスお願いいたします。

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

回答3件

この部分 display(i); を実行するタイミングですでに forループが終わっているため、 i は nav_menu.length の値と同じになっています。即時関数などを使うなど、書き方を変えなければ望む挙動にはならないと思います。

JavaScript
1nav_menu[i].onclick = function(){
2    display(i);
3}

【JavaScriptで即時関数を使う理由 - Qiita】
http://qiita.com/katsukii/items/cfe9fd968ba0db603b1e

【即時関数のメリットと主な用途｜もっこりJavaScript｜ANALOGIC（アナロジック）】
http://analogic.jp/immediate-function/

yusakauniさんの指摘されている箇所とここを直せば多分動きますよ。

投稿2016/05/24 17:04

kei344

総合スコア69625

エラー発生箇所以外にもおかしいところはありますが、とりあえずエラー箇所だけ……
display内のループが無限ループになっているため、con_menu[3]を参照しエラーになっています。
con_menu.lengthではなく、 j < con_menu.lengthでは？

投稿2016/05/24 13:06

yusakauni

総合スコア14

ベストアンサー

こんにちは。

こんなかんじですかね

css
1    li{
2        cursor: pointer;
3    }
4    .hidden{
5        display:none;
6    }
7    </s

javascript
1    for(var i = 0 ; i < nav_menu.length ; i++){
2        (function(arg){
3            nav_menu[i].addEventListener("click",function(){
4                display(arg);
5            });            
6        })(i);
7    }
8
9    function display(a){
10        console.log(a);
11        for(var j = 0 ; j < con_menu.length ; j++){
12            con_menu[j].classList.add("hidden");
13        }
14
15        con_menu[a].classList.remove("hidden");
16    }