teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

質問文の書式を変更いたしました。

2020/10/16 01:43

投稿

tom_k_92
tom_k_92

スコア7

title CHANGED
File without changes
body CHANGED
@@ -1,10 +1,11 @@
1
1
  HTMLのaタグで```onclick```属性に実行したいJavaScriptを記述した場合、
2
- 「JavaScript → 画面遷移」という順序になりますが、
2
+ **「JavaScript → 画面遷移」**という順序になりますが、
3
- 「画面遷移 → JavaScript」という順序を付与する方法に困っています。
3
+ **「画面遷移 → JavaScript」**という順序を付与する方法に困っています。
4
4
 
5
5
  なお、流入経路は2パターン用意しており、以下のように場合分けを考えております。
6
- 1経路目 「画面遷移のみ」
7
- 2経路目 「画面遷移 → JavaScript」
8
6
 
7
+ **1経路目 「画面遷移のみ」**
8
+ **2経路目 「画面遷移 → JavaScript」**
9
+
9
10
  詳しい方がおられましたら、助言をいただけると幸いです。
10
11
  よろしくお願いいたします。

1

質問内容を変更いたしました。

2020/10/16 01:43

投稿

tom_k_92
tom_k_92

スコア7

title CHANGED
@@ -1,1 +1,1 @@
1
- 【HTML・Bootstrap】流入経路ごとのactiveボタンの切り替えについて
1
+ クリック時、画面遷移後JavaScriptを実行する方法について
body CHANGED
@@ -1,28 +1,10 @@
1
+ HTMLのaタグで```onclick```属性に実行したいJavaScriptを記述した場合、
2
+ 「JavaScript → 画面遷移」という順序になりますが、
1
- 現在、HTMLBootstrap使用しホームページを制作しております。
3
+ 「画面遷移 → JavaScript」いう順序付与する方法に困っます。
2
4
 
3
- ナビゲショメニューを作成し、ボタンを押すと```active```クラスがそれぞれ切り替わる仕組みになっます。(以下コードを参照)
5
+ なお、流入経路は2パターン用意ており以下のよう場合分けを考えおります。
6
+ 1経路目 「画面遷移のみ」
7
+ 2経路目 「画面遷移 → JavaScript」
4
8
 
5
- ```html
6
- <!-- ナビゲーションメニュー -->
7
- <ul class="nav nav-pills nav-fill my-5" id="pills-tab" role="tablist">
8
- <li class="nav-item">
9
- <a class="nav-link py-3 active" id="pills-user-tab" data-toggle="pill" href="#pills-user" role="tab" aria-controls="pills-user" aria-selected="true">ユーザー</a>
10
- </li>
11
- <li class="nav-item">
12
- <a class="nav-link py-3" id="pills-fan-tab" data-toggle="pill" href="#pills-fan" role="tab" aria-controls="pills-fan" aria-selected="false">クリエイター</a>
13
- </li>
14
- <li class="nav-item">
15
- <a class="nav-link py-3" id="pills-creater-tab" data-toggle="pill" href="#pills-creater" role="tab" aria-controls="pills-creater" aria-selected="false">ファン</a>
16
- </li>
17
- </ul>
18
- <!-- /ナビゲーションメニュー -->
19
-
20
- ```
21
- 流入経路は2パターン用意しており、経路ごとに初期画面の```active```クラスの設定を変えたいと考えております。
22
- 1経路目 → ユーザーが```active```状態
23
- 2経路目 → ファンが```active```状態
24
-
25
- コードはスッキリさせたいので、できるだけJavaScriptの使用は避けたいのですが、
26
- 「2経路目のみユーザーの```active```クラスを削除し、ファンに```active```クラスを付与する」というJavaScriptを記述するしかないでしょうか?
27
-
28
- 詳しい方がおられましたら、助言をいただけると幸いです。
9
+ 詳しい方がおられましたら、助言をいただけると幸いです。
10
+ よろしくお願いいたします。