閲覧ありがとうございます。
ただいま、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}