回答編集履歴
2
これで最後。もうこの質問では答えない
answer
CHANGED
|
@@ -82,4 +82,47 @@
|
|
|
82
82
|
|
|
83
83
|
$(".tabs-content > div").hide();
|
|
84
84
|
$('.tabs-content div[id="tabs-' + selector.slice(-1) + '"]').show();
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
追記2
|
|
88
|
+
===
|
|
89
|
+
これでこの質問への回答は最後にします。
|
|
90
|
+
どうしてもif文にしたいならこうですね。元のif文を維持するのは統一感がなくて正直嫌なので変えます。
|
|
91
|
+
もし、部下からのレビューで来たらキレる自信があります。
|
|
92
|
+
|
|
93
|
+
```js
|
|
94
|
+
const showTab = (selector) => {
|
|
95
|
+
// 引数selectorの中身をコンソールで確認する
|
|
96
|
+
console.log(selector);
|
|
97
|
+
|
|
98
|
+
$(".tabs-menu > div").removeClass("active");
|
|
99
|
+
$(".tabs-content > div").hide();
|
|
100
|
+
|
|
101
|
+
if (selector === "tab-menu-a") {
|
|
102
|
+
$("#tab-menu-a").addClass('active');
|
|
103
|
+
$("#tabs-a").show();
|
|
104
|
+
}
|
|
105
|
+
else if (selector === "tab-menu-b") {
|
|
106
|
+
$("#tab-menu-b").addClass('active');
|
|
107
|
+
$("#tabs-b").show();
|
|
108
|
+
}
|
|
109
|
+
else if (selector === "tab-menu-c") {
|
|
110
|
+
$("#tab-menu-c").addClass('active');
|
|
111
|
+
$("#tabs-c").show();
|
|
112
|
+
}
|
|
113
|
+
};
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
// タブがクリックされたらコンテンツを表示
|
|
117
|
+
$(".tabs-menu div").on("click", (e) => {
|
|
118
|
+
const selector = $(e.target).attr('id');
|
|
119
|
+
showTab(selector);
|
|
120
|
+
});
|
|
121
|
+
|
|
122
|
+
// 初期状態として1番目のタブを表示
|
|
123
|
+
showTab('tab-menu-a');
|
|
124
|
+
|
|
125
|
+
// $(".tabs-menu div").on("click", (e) => {…}) でselectorはtab-menuだからこの指定はダメ
|
|
126
|
+
// 関数もmenuを取るようにしか作っていないでしょう？
|
|
127
|
+
// showTab('#tabs-a');
|
|
85
128
|
```
|
1
コメントとかでどう解決したよってのが無いし魚が欲しかったっぽいのでレビューがてらに追記
answer
CHANGED
|
@@ -23,4 +23,63 @@
|
|
|
23
23
|
```
|
|
24
24
|
|
|
25
25
|
動作コードは裏で書いていますがまずはヒントに留めます。
|
|
26
|
-
頑張ってください。
|
|
26
|
+
頑張ってください。
|
|
27
|
+
|
|
28
|
+
追記
|
|
29
|
+
=====
|
|
30
|
+
こう解決したとかなかったんで、単に中身が欲しかったと解釈したのでコードを追記します。
|
|
31
|
+
|
|
32
|
+
## jsfiddleで確認する
|
|
33
|
+
[https://jsfiddle.net/uLmyc3br/1/](https://jsfiddle.net/uLmyc3br/1/)
|
|
34
|
+
|
|
35
|
+
## レビューしたコード
|
|
36
|
+
```js
|
|
37
|
+
const showTab = (selector) => {
|
|
38
|
+
// 引数selectorの中身をコンソールで確認する
|
|
39
|
+
console.log(selector);
|
|
40
|
+
|
|
41
|
+
// TIPS: 同じ個所を操作する実装はなるべく固めよう
|
|
42
|
+
// tab-menuの操作をまとめる。分散させると全体に神経を使うので疲れる。
|
|
43
|
+
$(".tabs-menu > div").removeClass("active");
|
|
44
|
+
$(`.tabs-menu div[id="${selector}"]`).addClass('active');
|
|
45
|
+
|
|
46
|
+
// 同様にtabsの操作をまとめる
|
|
47
|
+
$(".tabs-content > div").hide();
|
|
48
|
+
$(`.tabs-content div[id="tabs-${selector.slice(-1)}"]`).show();
|
|
49
|
+
|
|
50
|
+
// なぜtabs-menuは動的にselector変数で処理しているのにtabsはifなのか？
|
|
51
|
+
// 同じように実装した方が統一感があってキレイだ
|
|
52
|
+
// if (selector === "tab-menu-a") {
|
|
53
|
+
// $("#tabs-a").show();
|
|
54
|
+
// }
|
|
55
|
+
// else if (selector === "tab-menu-b") {
|
|
56
|
+
// $("#tabs-b").show();
|
|
57
|
+
// }
|
|
58
|
+
// else if (selector === "tab-menu-c") {
|
|
59
|
+
// $("#tab-c").show();
|
|
60
|
+
// }
|
|
61
|
+
|
|
62
|
+
// TIPS: 無駄なコードは書かない
|
|
63
|
+
// これの有無で動作に違いはない。大体hide()している箇所ないし
|
|
64
|
+
// $("#" + selector).show();
|
|
65
|
+
};
|
|
66
|
+
|
|
67
|
+
// タブがクリックされたらコンテンツを表示
|
|
68
|
+
$(".tabs-menu div").on("click", (e) => {
|
|
69
|
+
const selector = $(e.target).attr('id');
|
|
70
|
+
showTab(selector);
|
|
71
|
+
});
|
|
72
|
+
|
|
73
|
+
// 初期状態として1番目のタブを表示
|
|
74
|
+
showTab('tab-menu-a');
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
## その他
|
|
78
|
+
ヒアドキュメント部分はこう直そうかどうか迷ったけど、clickイベント起動なのでパフォーマンスにそこまで影響しないだろうからそのままにした。基本的には"+"で連結した方が動作は早い。
|
|
79
|
+
```js
|
|
80
|
+
$(".tabs-menu > div").removeClass("active");
|
|
81
|
+
$('.tabs-menu div[id="' + selector + '"]').addClass('active');
|
|
82
|
+
|
|
83
|
+
$(".tabs-content > div").hide();
|
|
84
|
+
$('.tabs-content div[id="tabs-' + selector.slice(-1) + '"]').show();
|
|
85
|
+
```
|