前提・実現したいこと
プログラミング初心者です。
WEBページのサンプルコードを参考にしながらJavaScriptを使用したタブの切り替えを実装したいと思っています。
直接phpファイルにJavaScriptを記述した場合は正しく動作しますが、
外部ファイルとして読み込む時が上手くいきません。
外部ファイルでDOMContentLoadedのイベントリスナを実装するにはどのような書き方をすれば宜しいでしょうか。
発生している問題・エラーメッセージ
外部ファイルに分けたイベントリスナ(DOMContentLoaded)が実装できない
該当のソースコード
[sample01.php]
php
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>Document</title> 8 <link rel="stylesheet" type="text/css" href="cssSample01.css"> 9</head> 10<body> 11 12<?php 13//切り替えタブ 14echo '<p><h2>切り替えタブ</h2></p>'; 15echo '<div class="box1">'; 16 17echo 18'<div class="panel> 19 20<ul class="tab-group"> 21<li class="tab tab-A is-active">タブ1</li> 22<li class="tab tab-B">タブ2<li> 23<li class="tab tab-C">タブ3<li> 24</ul> 25</div> 26 27<div class="panel-group"> 28<div class="panel tab-A is-show">コンテンツ1</div> 29<div class="panel tab-B">コンテンツ2</div> 30<div class="panel tab-C">コンテンツ3</div> 31</div> 32 33</div>'; 34 35echo '</div>'; 36?> 37<!--JavaScript読み込み--> 38<script src='changeTab.js'></script> 39 40</body> 41</html>
[changeTab.js]
JavasCript
1document.addEventListener('DOMContentLoaded', function(){ 2 // タブに対してクリックイベントを適用 3 const tabs = document.getElementsByClassName('tab'); //ノードを取得 4 for(let i = 0; i < tabs.length; i++) { //繰返し構文で全てに適用 5 tabs[i].addEventListener('click', tabSwitch); 6 } 7 8 // タブをクリックすると実行する関数 9 function tabSwitch(){ 10 // タブのclassの値を変更 11 document.getElementsByClassName('is-active')[0].classList.remove('is-active'); //is-activeの追加 12 this.classList.add('is-active'); //is-activeの削除 13 // コンテンツのclassの値を変更 14 document.getElementsByClassName('is-show')[0].classList.remove('is-show'); 15 const arrayTabs = Array.prototype.slice.call(tabs); //引数にとったオブジェクトを配列に変換してくれます。 16 const index = arrayTabs.indexOf(this); //配列に対してだけ使い、DOMを引数にとって一致した要素番号を戻します。 17 document.getElementsByClassName('panel')[index].classList.add('is-show'); 18 }; 19});
[cssSample01.css]
css
1.tab{ 2 flex-grow: 1; 3 padding:5px; 4 list-style:none; 5 border:solid 1px #CCC; 6 text-align:center; 7 cursor:pointer; 8} 9.panel-group{ 10 height:100px; 11 border:solid 1px #CCC; 12 border-top:none; 13 background:#eee; 14} 15.panel{ /*非表示にさせます*/ 16 display:none; 17} 18.tab.is-active{ /*tabを上書きして発火させます*/ 19 background:#F00; 20 color:#FFF; 21 transition: all 0.2s ease-out; 22} 23.panel.is-show{ /*panelを上書きしてこれだけ表示させます*/ 24 display:block; 25}
試したこと
JavaScript読み込みではなく直接sample01.phpに記述した場合は動きます。
補足情報(FW/ツールのバージョンなど)
参考にしたHP: https://qiita.com/savaniased/items/41af6bb4023414ae16f8
回答1件
あなたの回答
tips
プレビュー