特定のタブを表示できない

前提・実現したいこと

みほんの講座動画を見て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/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

seastar3

2021/04/10 05:29

tab.cssに何が用意されているか示されないと答えられません。

hanpan

2021/04/10 08:59

cssファイルとつながらなかったのでHTMLに書き込んでます。

seastar3

2021/04/10 22:04

そのCSSにBootstrap等が指定してあるのですが、それもwebページ側でリンクしなければ反応しませんよ。

hanpan

2021/04/11 03:03

リンクさせることを理解できていないので方法がわからないです

hanpan

2021/04/11 03:17

無知ですいません

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

回答2件

ダウンロードできるということは、ネットからリンクできるわけですね。
バージョン5のBootstarapのリンクなら、
BootstarpのCDN とテンプレートのコード紹介の記事のように<head>にlinkタグを記述します。
もしバージョン4対応ならBoostsrap4.3のテンプレート紹介の記事のコードを使います。

投稿2021/04/24 07:40

seastar3

総合スコア2285

hanpan

2021/04/29 02:22

bootstrapの方は実行してみたらエラーが起きなかったんですけどpeppermin.jsでエラーが起きていますダウンロードするものを間違えてしまってますかね

seastar3

2021/04/29 02:53

popper.min.js と jquery-(バージョン).min.js をダウンロードします。 min は圧縮版という意味なので、popper.js と jquery-(バージョン).js を設定してもよいです。

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

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

seastar3

総合スコア2285

hanpan

2021/04/24 02:01

min.js.mapはダウンロードできるのですがmin.jsのダウンロードがわかりません

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！