Q&A
初心者のため、質問に関して至らない点がありましたら申し訳ございません。
前提・実現したいこと
javascript,css,htmlを用いてタブ(Chromeのタブのようにコンテンツを切り替えて表示させたい)を作成しています。
教材の例題を自分のAWSのワークスペースで同じように再現したいのですが思い通りに動作させることが出来ていません。ご教授お願い致します。
発生している問題・エラーメッセージ
タブの形はできていますが、タブの切り替えをクリックして変えることができずに困っています。
デベロッパーツールのconsoleを確認すると、main1.js:6 #tabs-1 と表示されています。
該当のソースコード
index1.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jQuery テスト</title> <link rel="stylesheet" href="main1.css"> </head> <body> <ul class="tabs-menu"> <li><a href="#tabs-1">タブ1</a></li> <li><a href="#tabs-2">タブ2</a></li> <li><a href="#tabs-3">タブ3</a></li> </ul> <section class="tabs-content"> <section id="tabs-1"> <p>タブ1の内容が入ります。</p> </section> <section id="tabs-2"> <p>タブ2の内容が入ります。</p> </section> <section id="tabs-3"> <p>タブ3の内容が入ります。</p> </section> </section> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="main1.js"></script> </body> </html>
main1.css
/* ページ全体での文字色の設定 */ body { color: #3F4548; } /* ulのデフォルトスタイルを消去 */ .tabs-menu { margin: 0; padding: 0; list-style-type: none; } /* タブの基本スタイル */ .tabs-menu li { float: left; margin-right: 8px; margin-bottom: -1px; border-style: solid; border-width: 1px; border-color: transparent; border-radius: 4px 4px 0 0; /*各プロパティをふわっと変える演出 */ transition: all 0.15s; } .tabs-menu a { display: block; padding: 10px 20px; color: #557F95; text-decoration: none; } /* 非選択のタブにマウスカーソルを乗せたら色を変える */ .tabs-menu li:not(.active):hover { border-color: #f0f0f0 #f0f0f0 #999; background-color: #f0f0f0; } /* 選択中のタブの色を設定 */ .tabs-menu .active { border-color: #999 #999 transparent #999; background-color: #fff; } .tabs-menu .active a { color: #3f4548; } /* タブコンテンツ表示エリア */ .tabs-content { clear: both; border: 1px solid #999; border-radius: 0 4px 4px 4px; padding: 10px; } /* 各タブのコンテンツはデフォルトで非表示 */ .tabs-content section { display: none; }
main1.js
/** * selectorに該当するタブを表示する関数 */ const showTab = (selector) => { // 引数selectorの中身をコンソールで確認する console.log(selector); /* 1. タブの選択状態のリセット */ //いったん、すべての.tabs-menu > liからactiveクラスを削除するf $('.tabs-menu > li').removeClass('active'); //いったん、すべての.tabs-content > sectionを非表示にする $('.tabs-content > section').hide(); /* 2.選択されたタブの表示 */ //.tabs-menu liのうち、selectorに該当するものにだけactiveクラスを付ける $(`.tabs-menu a[href="${selector}"]`) .parent('li') .addClass('active'); //.tabs-content > sectionのうち、selectorに該当するものだけを表示する $(selector).show(); }; //タブがクリックされたらコンテンツを表示 $('.tabs-manu a').on('click', (e) => { //hrefへのページ遷移を止める e.preventDefault(); //hrefの値を受け取った後、showTab()関数に渡す。e.targetはクリックされたタブ(.tabs-menu a)を表す const selector = $(e.target).attr('href'); showTab(selector); }); //初期状態として一番目のタブを表示 showTab('#tabs-1');
試したこと
コードの綴りの間違いによるエラーがないか、jQueryが正しく読み込まれているかを確認しましたが、動作しない原因を見つけることができずにいます。
補足情報（FW/ツールのバージョンなど）
AWS Cloud9を使用しています。
回答1件
0
ベストアンサー
js
1// $('.tabs-manu a') 2// ↓ 3 $('.tabs-menu a')
投稿2021/01/01 05:30
総合スコア69606
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/01/01 05:45