質問編集履歴
3
追記の文章を修正
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
追記の文章を修正
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
実現したいことの部分を少し具体的に追記しました
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
|
###発生している問題・エラーメッセージ
|