Q&A
バージョンは正しく
前提・実現したいこと
ここに質問の内容を詳しく書いてください。
ドットインストールのBootstrap4講座の通りに、Bootstrap4でウェブサイト作りの練習をしています。DotInstallというアプリのトップページを作るという体でデモページを作っています。おおかたの表示はうまくいっているのですが、Bootstrapが用意してあるjavascriptを読み込んでタブのリンクを作るところでつまずいています。data-toggle="tab"が効いていないようで、本来ならAndroidの部分をクリックすれば設定したHello Android.のメッセージが表示されるはずなのにiOSのもののままです。
発生している問題・エラーメッセージ
エラーメッセージ なし ### 該当のソースコード <div class="container"> <ul class="nav nav-tabs"> <li class="nav-item"> <a href="ios" class="nav-link active" data-toggle="tab">iOS</a> </li> <li> <a href="android" class="nav-link" data-toggle="tab">Android</a> </li> </ul> <div class="tab-content py-4"> <div id="ios" class="tab-pane active"> <p>Hello iOS. </p> </div> <div id="android" class="tab-pane"> <p>Hello Android. </p> </div> </div> </div> ```Bootstrap4 ソースコード <!doctype html> <html lang="ja"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <title>Dotinstall App</title> <style> .cover { background: url(img/img.jpg); background-size: cover; } </style> </head> <body> <header> <div class="cover text-white text-center py-5"> <h1 class="display-4 mb-4">Dotinstall App</h1> <a href="" class="btn btn-primary btn-lg">Get It Now!</a> </div> </header> <main> <section class="py-5"> <h2 class="text-center mb-5">Features</h2> <div class="container"> <div class="mb-5 row"> <div class="col-sm-8"> <h3>Awesome</h3> <p>Hello. Hello. </p> </div> <div class="col-sm-4"> <img src="img/phone.jpg" class="w-100 rounded-circle"> </div> </div> <div class="row"> <div class="col-sm-8 order-sm-2"> <h3>Awesome</h3> <p>Hello. Hello. </p> </div> <div class="col-sm-4 order-sm-1"><img src="img/phone.jpg" class="w-100 rounded-circle"></div> </div> </div> </div> </section> <section class="bg-light text-center py-5"> <h2 class="mb-5">Plans</h2> <div class="container"> <table class="table table-hover"> <thead> <tr><th>Plan A</th><th>Plan B</th></tr> </thead> <tbody> <tr><td>A</td><td>B</td></tr> <tr><td>AA</td><td>bB</td></tr> <tr><td>AaA</td><td>bBb</td></tr> </tbody> </table> </div> </section> <section class="py-5"> <h2 class="mb-5 text-center">How to use</h2> <div class="container"> <ul class="nav nav-tabs"> <li class="nav-item"> <a href="ios" class="nav-link active" data-toggle="tab">iOS</a> </li> <li> <a href="android" class="nav-link" data-toggle="tab">Android</a> </li> </ul> <div class="tab-content py-4"> <div id="ios" class="tab-pane active"> <p>Hello iOS. </p> </div> <div id="android" class="tab-pane"> <p>Hello Android. </p> </div> </div> </div> </section> </main> <footer></footer> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> </body> </html> ### 試したこと 該当するjavascriptが読み込めていないのかもと検索したが、正しい順番で末尾に読み込みがあるし読み込めているはず。 ### 補足情報（FW/ツールのバージョンなど） ここにより詳細な情報を記載してください。 Bootstrap4-3-1-distを公式サイトよりダウンロード。
Bootstrap v4.3.1で、使用OSはmacOS Mojave 10.14.3です。
じゃあHTML書いてあるバージョンは？
HTMLが書いてあるファイルということですか？
わかりやすく言えば、「HTML にて Bootstrap を読み込んでいますが、その読み込んでいる Bootstrap のバージョンは Bootstrap 4.0.0 のアルファバージョンです。ちゃんと Bootstrap 4.3.1 を読み込めば良いですよ。」ということです。
s8_chu様、ありがとうございます。おかげさまで理解できました。4.0.0-alphaとなっているところを4.3.3とすれば良いという理解でよろしいでしょうか？
4.3.1 とすれば良いですね。
タイポしてました、すみません。ありがとうございます。試してみます。
もしそれで解決したならば、質問は自己解決にしてください。
回答1件
0
ベストアンサー
html
1<a href="ios" class="nav-link active" data-toggle="tab">iOS</a> 2 3<a href="android" class="nav-link" data-toggle="tab">Android</a>
上記のhref="〜"の部分どちらも#をつけてhref="#ios" href="#android"としたら大丈夫では？
追記
もう一箇所、
html
1<li> 2<a href="android" class="nav-link" data-toggle="tab">Android</a> 3</li>
上記の<li>に.nav-itemが欠けています。<li class="nav-item">としてください。
投稿2019/03/22 13:22
編集2019/03/22 13:43
総合スコア1899
Bootstrap 4.0.0-alpha.6 は確か`active`クラスに関するバグの影響下にあるバージョンだと思うので、それだけでは正常に機能しないと思います(記憶に頼っているのであやふや)。
s8_chuさん > 提示されたコードを試したところ、#を書き足すだけで普通に動きました。しかし、それとは別の問題を発見したので追記しておきました。ありがとうございます。
cerfweb さん> 申し訳ありません。記憶違いでした。なんて恥ずかしい...。
よくあることです。お気になさらず！
ありがとうございます。おかげさまで動作するようになりました。
あなたの回答
tips
プレビュー
