bootstrapでのタブ切り替え

やりたいこと

タブをクリックしたらページ遷移なしで画像（ｓｖｇ）が切り替わる

現状

最初に読み込んだ画像のまま画面が切り替わらない。タブの実装は済んでいますが、中身の方と結びついていない？

今やっていること

jqueryにてタブクリックでタブ内容を取得し表示・非表示を切り替えることができないか模索中です。
ビギナーのためお力をお貸しいただけると大変助かります。

現状のコード

html
1<div id="dnweb-tabtest">
2    <!-- タブの切替部分 -->
3    <ul class="nav nav-tabs">
4        <li class="active"><a href="#tabNo.1" data-toggle="tab">1</a></li>
5        <li><a href="#tabNo.2" data-toggle="tab">2</a></li>
6        <li><a href="#tabNo.3" data-toggle="tab">3</a></li>
7        <li><a href="#tabNo.4" data-toggle="tab">4</a></li>
8        <li><a href="#tabNo.5" data-toggle="tab">5</a></li>
9    </ul>
10
11　　<!-- タブの中身-->
12     <div class="tab-pane active" id="tabNo.1">タブ1(svgタグにて画像作成)</div>
13        <div class="tab-pane active" id="tabNo.2">タブ2</div>
14        <div class="tab-pane active" id="tabNo.3">タブ3</div>
15    <div class="tab-pane active" id="tabNo.4">タブ4</div>
16        <div class="tab-pane active" id="tabNo.5">タブ5</div>
17

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

回答1件

ベストアンサー

動かないと思ったら一度サンプルに立ち返るのもありです。
下記はbootstrap４ですので、3系統を使用しているようであればそちらのドキュメンテーションをご確認下さい。
※3系統用の使用方法説明サイト
http://bootstrap3.cyberlab.info/javascript/tab.html
切り替わるべきコンテンツが.tab-contentで覆われていることや、
.tab-paneで.activeが付いているのは最初に表示するべきコンテンツのみだと分かります。

html
1<ul class="nav nav-tabs" id="myTab" role="tablist">
2  <li class="nav-item">
3    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
4  </li>
5  <li class="nav-item">
6    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
7  </li>
8  <li class="nav-item">
9    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
10  </li>
11</ul>
12<div class="tab-content" id="myTabContent">
13  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
14  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
15  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
16</div>