質問編集履歴

3

追記の文章を修正

2017/09/28 05:20

投稿

junagame
junagame

スコア12

test CHANGED
File without changes
test CHANGED
@@ -73,6 +73,10 @@
73
73
  今回の質問はクリックによるタブの表示切り替えはうまくいったのですが、
74
74
 
75
75
  連動して他の要素の表示・非表示を切り替えたいと思った際にうまくいきません。
76
+
77
+ chromeの検証画面のコンソールではエラーが出ていないのでプログラム自体が
78
+
79
+ うまく書けていないんだと思います。
76
80
 
77
81
  ```
78
82
 

2

追記の文章を修正

2017/09/28 05:20

投稿

junagame
junagame

スコア12

test CHANGED
File without changes
test CHANGED
@@ -28,33 +28,33 @@
28
28
 
29
29
 
30
30
 
31
- 具体的には該当のソースコードの欄に記載のある
32
-
33
- <span class="pdf_btn">
34
-
35
- <a class="mondai_pdf" href="#">PDF</a>
36
-
37
- <a class="kaitou_pdf" href="#">PDF</a>
38
-
39
- </span>
40
-
41
- の部分に
31
+ 【前提】
42
-
43
- <div class="tab_btn">
44
-
45
- <div class="mondai active"><p>tab_btn1</p></div>
46
-
47
- <div class="kaitou"><p>tab_btn2</p></div>
48
-
49
- <a href="#">outer_link</a>
50
-
51
- </div>
52
-
53
- 上記の要素のクリックに連動する形でactiveというクラスを付与・削除をしたいと考えています。
54
32
 
55
33
 
56
34
 
35
+ ページの読み込み時は
57
36
 
37
+ <a class="mondai_pdf dl_active" href="#">PDF</a>と
38
+
39
+ <div class="mondai active"><p>tab_btn1</p></div>と
40
+
41
+ <div class="tabConte mondai" style="display:block;">が表示されている状態
42
+
43
+ ※active、dl_activeにはdisplay:block;が指定してあります。
44
+
45
+  タブメニューはページ内に複数設置してあります。
46
+
47
+
48
+
49
+ 【実現したいこと】
50
+
51
+ tab_btnの子要素のクリックをイベントとして
52
+
53
+ tab_btnの子要素にactiveというクラスの付与・削除をしたい
54
+
55
+ pdf_btnの子要素とtabConteの子要素の表示・非表示を連動させたい
56
+
57
+ (クラスの付与、jqueryによるコントロールどちらでも大丈夫です)
58
58
 
59
59
 
60
60
 
@@ -174,20 +174,6 @@
174
174
 
175
175
 
176
176
 
177
- 実現したいことは
178
-
179
- tab_btnの子要素のクリックをイベントとして
180
-
181
- pdf_btnの子要素ととtabConteの子要素の表示・非表示を連動させたい
182
-
183
- (active、dl_activeのaddClass、removeClassの連動といいかえられるかもしれません)
184
-
185
- よろしくお願いいたします。
186
-
187
-
188
-
189
-
190
-
191
177
  ```
192
178
 
193
179
 

1

実現したいことの部分を少し具体的に追記しました

2017/09/28 05:17

投稿

junagame
junagame

スコア12

test CHANGED
File without changes
test CHANGED
@@ -4,6 +4,60 @@
4
4
 
5
5
  jQueryを使ったクリック時のタブの表示の切り替えと別の要素の表示・非表示を連動させたい
6
6
 
7
+
8
+
9
+ 実現したいことが分かりにくいとのご指摘をいただきましたので
10
+
11
+ もうすこし具体的な内容を追記いたします。
12
+
13
+
14
+
15
+ 【追記】
16
+
17
+ http://www.ofuta.me/jquery/408
18
+
19
+ 上記の記事を参考に
20
+
21
+ 1ページ内に複数のタブの切り替えがある場合のタブメニューを作成しました。
22
+
23
+ タブの切り替え自体は上記の記事を参考に設定できたのですが、
24
+
25
+ クリックのイベントに連動して他の要素にクラス付与とクラス削除をしたいと思ったときに
26
+
27
+ うまく動作してくれない状況です。
28
+
29
+
30
+
31
+ 具体的には該当のソースコードの欄に記載のある
32
+
33
+ <span class="pdf_btn">
34
+
35
+ <a class="mondai_pdf" href="#">PDF</a>
36
+
37
+ <a class="kaitou_pdf" href="#">PDF</a>
38
+
39
+ </span>
40
+
41
+ の部分に
42
+
43
+ <div class="tab_btn">
44
+
45
+ <div class="mondai active"><p>tab_btn1</p></div>
46
+
47
+ <div class="kaitou"><p>tab_btn2</p></div>
48
+
49
+ <a href="#">outer_link</a>
50
+
51
+ </div>
52
+
53
+ 上記の要素のクリックに連動する形でactiveというクラスを付与・削除をしたいと考えています。
54
+
55
+
56
+
57
+
58
+
59
+
60
+
7
61
  ```
8
62
 
9
63
  ###発生している問題・エラーメッセージ