Javascrptを使ったタブの切り替え処理について

閲覧ありがとうございます。
ただいま、Javascriptのみでタブを切り替う処理を行なっています。
まとめて処理したく、下記のようなコードを書いたのですが、タブ部分をクリックするとコンテンツ部分の全ての表示、非表示が切り替わってしまいます。
おそらく、Classから取り出した要素が一つ一つうまく処理できていなく、まとめて処理してしまっているのだと思うのですが、どう一つ一つ処理できますでしょうか。ご教授お願いいたします。

HTML
1<html>
2<body>
3<div class="title">
4    <ul class="tab">
5      <li id="art">Art</li>
6      <li id="science">Science</li>
7      <li id="math">Math</li>
8    </ul>
9
10    <div class="content" id="art_content">
11      <ul>
12        <li>art</li>
13      </ul>
14    </div>
15    <div class="content" id="science_content">
16      <ul>
17        <li>science</li>
18      </ul>
19    </div>
20    <div class="content" id="math_content">
21      <ul>
22        <li>math</li>
23      </ul>
24    </div>
25</div>
26<script>外部Javascriptの記載</script>
27</body>
28</html>
29

Javascript
1const titles = document.getElementsByClassName('tab');
2const pages = document.getElementsByClassName('content');
3
4window.onload = setTab;
5
6function setTab(){
7  for(let i=0; i<titles.length; i++){
8    titles[i].onclick = changeTab;
9  }
10}
11
12function changeTab(){
13  for(let i=0; i<pages.length; i++){
14    if(pages[i].style.display=="none"){
15      pages[i].style.display="block";
16    }else{
17      pages[i].style.display="none";
18      pages[i].style.display="none"
19    }
20  }return false;
21}

退会済みユーザー

2019/02/18 11:11

https://teratail.com/questions/174925 こちらの質問とは別件でしょうか？

退会済みユーザー

2019/02/18 11:13

同じ件になります！ただ、そちらでの記述があまりにも間違っていたのと、質問したい内容が変わり進展がありましたので、改めて質問させていただきました。

退会済みユーザー

2019/02/18 11:39

その場合は慎重に修正してください

退会済みユーザー

2019/02/18 11:44

yoshino543さん同件の質問なのであれば、新しく質問を投稿するのではなく、元の質問文を修正しましょう。前の質問をほおったままで同じ質問をするのはマナー違反だと思います。

退会済みユーザー

2019/02/18 11:46

ありがとうございます。質問の内容が違ったとしてもまるきり変えたほうがいいのでしょうか...? あちらはあちらで事情が違うので、まるきり変えるなら、と思ったのですが...

退会済みユーザー

2019/02/18 11:49

もちろん、内容が違う質問なのであれば、新しく質問しても問題ありません。その場合も前の質問をそのまま放置しないほうがよいでしょう。

退会済みユーザー

2019/02/18 11:51 編集

質問の内容自体、別物になるので、こちらはこのまま残せておければと思っております。あちらも放置はしたくないのですが、質問自体が的外れなものだったので、解決済にしておきます。ご不快な思いをさせてしまい、申し訳ありません。

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

回答1件

javascript
1<!DOCTYPE html>
2<html lang="ja">
3<meta charset="utf-8">
4<title>?</title>
5<style>
6.title > div.content:not(:first-of-type) { display: none; }
7</style>
8
9<body>
10<div class="title">
11    <ul class="tab">
12      <li id="art">Art</li>
13      <li id="science">Science</li>
14      <li id="math">Math</li>
15    </ul>
16
17    <div class="content" id="art_content">
18      <ul>
19        <li>art</li>
20      </ul>
21    </div>
22    <div class="content" id="science_content">
23      <ul>
24        <li>science</li>
25      </ul>
26    </div>
27    <div class="content" id="math_content">
28      <ul>
29        <li>math</li>
30      </ul>
31    </div>
32</div>
33<script>
34
35const
36  li = document.querySelectorAll ('div.title ul.tab li'),
37  div = document.querySelectorAll ('div.title div'),
38  M = new Map ([...li].map ((e,i)=>[e,div[i]])),
39  fp = (e, n) => {
40    while (e) {
41      if (e.tagName === n) break;
42      e = e.parentNode;
43    }
44    return e;
45  },
46  cs = (e, d = 'none') => e.style.display = d;
47
48
49document.addEventListener ('click', e => {
50  let li, div;
51  if (li = fp (e.target, 'LI')) {
52    if (div = M.get (li)) {
53      [...M.values ()].forEach (e => cs (e));
54      cs (div, 'block');
55    }
56  }
57}, false);
58
59
60</script>
61
62