質問編集履歴
3
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
|
|
18
18
|
```
|
|
19
19
|
//省略
|
|
20
|
-
|
|
20
|
+
.container-tab-notofication-todo {
|
|
21
21
|
.container-tabs {
|
|
22
22
|
display: flex;
|
|
23
23
|
text-align: center;
|
|
@@ -29,10 +29,10 @@
|
|
|
29
29
|
display: inline-block;
|
|
30
30
|
background-color: #eee;
|
|
31
31
|
}
|
|
32
|
-
|
|
32
|
+
.active {
|
|
33
33
|
background-color: white;
|
|
34
34
|
display: inline-block;
|
|
35
|
-
|
|
35
|
+
}
|
|
36
36
|
h3 {
|
|
37
37
|
font-weight: bold;
|
|
38
38
|
}
|
|
@@ -40,10 +40,13 @@
|
|
|
40
40
|
}
|
|
41
41
|
.container-body {
|
|
42
42
|
width: 100%;
|
|
43
|
+
&__item {
|
|
44
|
+
display: inline-block;
|
|
45
|
+
}
|
|
46
|
+
.show {
|
|
47
|
+
display: inline-block;
|
|
48
|
+
}
|
|
43
49
|
}
|
|
44
|
-
.show {
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
50
|
```
|
|
48
51
|
|
|
49
52
|
mypage.js
|
|
@@ -55,7 +58,7 @@
|
|
|
55
58
|
$(".active").removeClass("active");
|
|
56
59
|
$(this).addClass("active");
|
|
57
60
|
const index = tabs.index(this);
|
|
58
|
-
$(".container-
|
|
61
|
+
$(".container-body__item").removeClass("show").eq(index).addClass("show");
|
|
59
62
|
}
|
|
60
63
|
tabs.click(tabSwitch);
|
|
61
64
|
});
|
|
@@ -71,9 +74,9 @@
|
|
|
71
74
|
%li.container-tabs__item
|
|
72
75
|
%h3 やることリスト
|
|
73
76
|
%ul.container-body
|
|
74
|
-
%li.container-
|
|
77
|
+
%li.container-body__item.show
|
|
75
78
|
%p お知らせはありません
|
|
76
|
-
%li.container-
|
|
79
|
+
%li.container-body__item
|
|
77
80
|
%p やることはありません
|
|
78
81
|
```
|
|
79
82
|
|
2
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -2,14 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
現在、メルカリのクローンサイトを作成しております。
|
|
4
4
|
|
|
5
|
-
マイページ内のお知らせとやることリストにクリックイベントを発生させて、タブの切り替え
|
|
5
|
+
マイページ内のお知らせとやることリストにクリックイベントを発生させて、タブの切り替えをし、切り替えた内容を表示させたいです。
|
|
6
6
|
|
|
7
7
|
# 実現したいこと
|
|
8
|
-
クリックしたらその箇所が#whiteになり、そうではない箇所が#eeeになる。
|
|
9
8
|
showクラスで表示される内容が変わる。
|
|
10
9
|
|
|
11
|
-
# 仮説
|
|
12
|
-
|
|
10
|
+
タブをクリックしたらクリックした箇所が白くなり切り替えは実現できています。
|
|
11
|
+
しかし、showの内容が反映されません。
|
|
13
12
|
|
|
14
13
|
|
|
15
14
|
container-bodyのscssは途中です。
|
|
@@ -29,11 +28,11 @@
|
|
|
29
28
|
padding: 20px 60px;
|
|
30
29
|
display: inline-block;
|
|
31
30
|
background-color: #eee;
|
|
31
|
+
}
|
|
32
|
-
|
|
32
|
+
.active {
|
|
33
33
|
background-color: white;
|
|
34
34
|
display: inline-block;
|
|
35
35
|
}
|
|
36
|
-
}
|
|
37
36
|
h3 {
|
|
38
37
|
font-weight: bold;
|
|
39
38
|
}
|
|
@@ -42,6 +41,7 @@
|
|
|
42
41
|
.container-body {
|
|
43
42
|
width: 100%;
|
|
44
43
|
}
|
|
44
|
+
.show {
|
|
45
45
|
}
|
|
46
46
|
}
|
|
47
47
|
```
|
1
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -23,12 +23,12 @@
|
|
|
23
23
|
display: flex;
|
|
24
24
|
text-align: center;
|
|
25
25
|
cursor: pointer;
|
|
26
|
-
background-color: #eee;
|
|
27
26
|
&__item {
|
|
28
27
|
width: 50%;
|
|
29
28
|
font-size: 17px;
|
|
30
29
|
padding: 20px 60px;
|
|
31
30
|
display: inline-block;
|
|
31
|
+
background-color: #eee;
|
|
32
32
|
&__item.active {
|
|
33
33
|
background-color: white;
|
|
34
34
|
display: inline-block;
|