Q&A
tab.cssに何が用意されているか示されないと答えられません。
前提・実現したいこと
みほんの講座動画を見てJavascriptのタブを勉強してるのですが、HTMLのタブ０のみをひょうじさせようとJavaScriptを反映させたのですが、cssが変化するだけで表示がされません。
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
JavaScript
1(()=>{ 2 3 const doc = document; 4 const tab = doc.getElementById('js-tab'); 5 const nav = tab.querySelectorAll('[data-nav]'); 6 const content = tab.querySelectorAll('[data-content]'); 7 8 function init() { 9 content[0].style.display = 'block'; 10 }; 11init(); 12 13 14 })();
HTML
1<!doctype html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet"href="tab.css"> 6 7 <style> 8 .tab { 9width:500px; 10} 11.tab-nav{ 12 display: flex; 13} 14.tab-nav-item { 15 background: #ccc; 16 color: #000; 17 padding: 10px 20px; 18 text-decoration: none; 19 border-radius: 5px 5px 0 0; 20} 21.tab-nav-item.is-active { 22 background: #000; 23 color: #FFF; 24} 25.tab-contents{ 26 border: 1px solid #ccc; 27 padding: 20px; 28} 29 .tab-contents-item { 30 display: none; 31 32} 33 </style> 34 </head> 35 <body> 36 <div class="tab" id="js-tab"> 37 <a href="" class="tab-nav-item is-active" data-content="0">Tab-0</a> 38 <a href="" class="tab-nav-item" data-content="1">Tab-1</a> 39 <a href="" class="tab-nav-item" data-content="2">Tab-2</a> 40 </div> 41 <div class="tab-contents"> 42 <div class="tab-contents-item" data-content="0"> 43タブその0 44 </div> 45 <div class="tab-contents-item" data-content="1"> 46 タブその1 47 </div> 48 <div class="tab-contents-item" data-content="2"> 49 タブその2 50 </div> 51</div> 52 </div> 53 54 <script type ="text/javascript" src="tab3.js"></script> 55</body> 56 57 58 </html> 59
試したこと
vscodeでの確認。検証での確認
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答2件
0
ダウンロードできるということは、ネットからリンクできるわけですね。
バージョン5のBootstarapのリンクなら、
BootstarpのCDN とテンプレートのコード紹介の記事のように<head>にlinkタグを記述します。
もしバージョン4対応ならBoostsrap4.3のテンプレート紹介の記事のコードを使います。
投稿2021/04/24 07:40
総合スコア2287
0
Bootstrap等の指定が効いていないと推測されます。
ネットにつながった環境で実行するか、適用するCSSフレームワークがBootstrapだとすれぱ、
jquery-3.4.1.min.jsとpopper.min.jsとbootstrap.min.jsをダウンロードして、webページと同じフォルダに入れて、
html
1<script src="jquery-3.4.1.min.js"></script> 2<script src="popper.min.js"></script> 3<script src="bootstrap.min.js"></script>
とWebページに追加すれは、反映されるでしょう。
投稿2021/04/10 22:06
編集2021/04/11 02:24総合スコア2287
あなたの回答
tips
プレビュー
