質問編集履歴

2

ご指摘通り追記致しました。

2018/03/04 09:55

投稿

TakahashiManabu
TakahashiManabu

スコア11

test CHANGED
File without changes
test CHANGED
@@ -66,6 +66,14 @@
66
66
 
67
67
  ```
68
68
 
69
+ 【追記】ちなみに、このHTMLにはBootstrap JSを利用しています。
70
+
71
+ [https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior](https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior)
72
+
73
+
74
+
75
+
76
+
69
77
  **jQuery部分**
70
78
 
71
79
  ```ここに言語を入力

1

HTML部分を追記致しました。

2018/03/04 09:55

投稿

TakahashiManabu
TakahashiManabu

スコア11

test CHANGED
File without changes
test CHANGED
@@ -9,6 +9,64 @@
9
9
 
10
10
 
11
11
  現在採用しているやり方としては、以下のスクリプトをソースに挿入しています。
12
+
13
+ **HTML部分** (ナビゲーションとそれに対応するタブコンテンツ部分のみ)
14
+
15
+ ```ここに言語を入力
16
+
17
+ <nav>
18
+
19
+ <ul class="nav nav-tabs">
20
+
21
+ <li class="nav-item"><a href="#tab1" class="nav-link navbar-default" data-toggle="tab">タブ1</a></li>
22
+
23
+ <li class="nav-item"><a href="#tab2" class="nav-link navbar-default" data-toggle="tab">タブ2</a></li>
24
+
25
+ <li class="nav-item"><a href="#tab3" class="nav-link navbar-default" data-toggle="tab">タブ3</a></li>
26
+
27
+ <li class="nav-item"><a href="#tab4" class="nav-link navbar-default" data-toggle="tab">タブ4</a></li>
28
+
29
+ </ul>
30
+
31
+ </nav>
32
+
33
+
34
+
35
+ <!--タブのコンテンツ部分-->
36
+
37
+ <div class="tab-content px-5 bg-white">
38
+
39
+
40
+
41
+ <div id="tab1" class="tab-pane">
42
+
43
+ タブ1の表示
44
+
45
+ </div>
46
+
47
+ <div id="tab2" class="tab-pane">
48
+
49
+ タブ2の表示
50
+
51
+ </div>
52
+
53
+ <div id="tab3" class="tab-pane">
54
+
55
+ タブ3の表示
56
+
57
+ </div>
58
+
59
+ <div id="tab4" class="tab-pane">
60
+
61
+ タブ4の表示
62
+
63
+ </div>
64
+
65
+
66
+
67
+ ```
68
+
69
+ **jQuery部分**
12
70
 
13
71
  ```ここに言語を入力
14
72