質問編集履歴
3
追記の文章を修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -36,6 +36,8 @@
|
|
|
36
36
|
実装する際はそれっぽい記事を探して必要な部分を修正して対応する程度の知識量です。
|
|
37
37
|
今回の質問はクリックによるタブの表示切り替えはうまくいったのですが、
|
|
38
38
|
連動して他の要素の表示・非表示を切り替えたいと思った際にうまくいきません。
|
|
39
|
+
chromeの検証画面のコンソールではエラーが出ていないのでプログラム自体が
|
|
40
|
+
うまく書けていないんだと思います。
|
|
39
41
|
```
|
|
40
42
|
|
|
41
43
|
###該当のソースコード
|
2
追記の文章を修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -13,20 +13,20 @@
|
|
|
13
13
|
クリックのイベントに連動して他の要素にクラス付与とクラス削除をしたいと思ったときに
|
|
14
14
|
うまく動作してくれない状況です。
|
|
15
15
|
|
|
16
|
-
具体的には該当のソースコードの欄に記載のある
|
|
17
|
-
<span class="pdf_btn">
|
|
18
|
-
<a class="mondai_pdf" href="#">PDF</a>
|
|
19
|
-
<a class="kaitou_pdf" href="#">PDF</a>
|
|
20
|
-
</span>
|
|
21
|
-
|
|
16
|
+
【前提】
|
|
22
|
-
<div class="tab_btn">
|
|
23
|
-
<div class="mondai active"><p>tab_btn1</p></div>
|
|
24
|
-
<div class="kaitou"><p>tab_btn2</p></div>
|
|
25
|
-
<a href="#">outer_link</a>
|
|
26
|
-
</div>
|
|
27
|
-
上記の要素のクリックに連動する形でactiveというクラスを付与・削除をしたいと考えています。
|
|
28
17
|
|
|
18
|
+
ページの読み込み時は
|
|
19
|
+
<a class="mondai_pdf dl_active" href="#">PDF</a>と
|
|
20
|
+
<div class="mondai active"><p>tab_btn1</p></div>と
|
|
21
|
+
<div class="tabConte mondai" style="display:block;">が表示されている状態
|
|
22
|
+
※active、dl_activeにはdisplay:block;が指定してあります。
|
|
23
|
+
タブメニューはページ内に複数設置してあります。
|
|
29
24
|
|
|
25
|
+
【実現したいこと】
|
|
26
|
+
tab_btnの子要素のクリックをイベントとして
|
|
27
|
+
tab_btnの子要素にactiveというクラスの付与・削除をしたい
|
|
28
|
+
pdf_btnの子要素とtabConteの子要素の表示・非表示を連動させたい
|
|
29
|
+
（クラスの付与、jqueryによるコントロールどちらでも大丈夫です）
|
|
30
30
|
|
|
31
31
|
```
|
|
32
32
|
###発生している問題・エラーメッセージ
|
|
@@ -86,13 +86,6 @@
|
|
|
86
86
|
※cssのactive、dl_activeというクラスにdisplay: block;をあてています。
|
|
87
87
|
上記のHTMLとjQueryでタブの表示の切り替えはうまくいっています。
|
|
88
88
|
|
|
89
|
-
実現したいことは
|
|
90
|
-
tab_btnの子要素のクリックをイベントとして
|
|
91
|
-
pdf_btnの子要素ととtabConteの子要素の表示・非表示を連動させたい
|
|
92
|
-
（active、dl_activeのaddClass、removeClassの連動といいかえられるかもしれません）
|
|
93
|
-
よろしくお願いいたします。
|
|
94
|
-
|
|
95
|
-
|
|
96
89
|
```
|
|
97
90
|
|
|
98
91
|
###試したこと
|
1
実現したいことの部分を少し具体的に追記しました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,6 +1,33 @@
|
|
|
1
1
|
###前提・実現したいこと
|
|
2
2
|
```
|
|
3
3
|
jQueryを使ったクリック時のタブの表示の切り替えと別の要素の表示・非表示を連動させたい
|
|
4
|
+
|
|
5
|
+
実現したいことが分かりにくいとのご指摘をいただきましたので
|
|
6
|
+
もうすこし具体的な内容を追記いたします。
|
|
7
|
+
|
|
8
|
+
【追記】
|
|
9
|
+
http://www.ofuta.me/jquery/408
|
|
10
|
+
上記の記事を参考に
|
|
11
|
+
1ページ内に複数のタブの切り替えがある場合のタブメニューを作成しました。
|
|
12
|
+
タブの切り替え自体は上記の記事を参考に設定できたのですが、
|
|
13
|
+
クリックのイベントに連動して他の要素にクラス付与とクラス削除をしたいと思ったときに
|
|
14
|
+
うまく動作してくれない状況です。
|
|
15
|
+
|
|
16
|
+
具体的には該当のソースコードの欄に記載のある
|
|
17
|
+
<span class="pdf_btn">
|
|
18
|
+
<a class="mondai_pdf" href="#">PDF</a>
|
|
19
|
+
<a class="kaitou_pdf" href="#">PDF</a>
|
|
20
|
+
</span>
|
|
21
|
+
の部分に
|
|
22
|
+
<div class="tab_btn">
|
|
23
|
+
<div class="mondai active"><p>tab_btn1</p></div>
|
|
24
|
+
<div class="kaitou"><p>tab_btn2</p></div>
|
|
25
|
+
<a href="#">outer_link</a>
|
|
26
|
+
</div>
|
|
27
|
+
上記の要素のクリックに連動する形でactiveというクラスを付与・削除をしたいと考えています。
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
4
31
|
```
|
|
5
32
|
###発生している問題・エラーメッセージ
|
|
6
33
|
|