質問編集履歴

3

修正

2020/08/23 06:54

投稿

keisuke.F
keisuke.F

スコア19

test CHANGED
File without changes
test CHANGED
@@ -36,7 +36,7 @@
36
36
 
37
37
  //省略
38
38
 
39
- .container-tab-notofication-todo {
39
+ .container-tab-notofication-todo {
40
40
 
41
41
  .container-tabs {
42
42
 
@@ -60,13 +60,13 @@
60
60
 
61
61
  }
62
62
 
63
-      .active {
63
+ .active {
64
64
 
65
65
  background-color: white;
66
66
 
67
67
  display: inline-block;
68
68
 
69
- }
69
+ }
70
70
 
71
71
  h3 {
72
72
 
@@ -82,13 +82,19 @@
82
82
 
83
83
  width: 100%;
84
84
 
85
+ &__item {
86
+
87
+ display: inline-block;
88
+
89
+ }
90
+
91
+ .show {
92
+
93
+ display: inline-block;
94
+
95
+ }
96
+
85
97
  }
86
-
87
-     .show {
88
-
89
- }
90
-
91
- }
92
98
 
93
99
  ```
94
100
 
@@ -112,7 +118,7 @@
112
118
 
113
119
  const index = tabs.index(this);
114
120
 
115
- $(".container-body").removeClass("show").eq(index).addClass("show");
121
+ $(".container-body__item").removeClass("show").eq(index).addClass("show");
116
122
 
117
123
  }
118
124
 
@@ -144,11 +150,11 @@
144
150
 
145
151
  %ul.container-body
146
152
 
147
- %li.container-body.show
153
+ %li.container-body__item.show
148
154
 
149
155
  %p お知らせはありません
150
156
 
151
- %li.container-body
157
+ %li.container-body__item
152
158
 
153
159
  %p やることはありません
154
160
 

2

修正

2020/08/23 06:54

投稿

keisuke.F
keisuke.F

スコア19

test CHANGED
File without changes
test CHANGED
@@ -6,21 +6,19 @@
6
6
 
7
7
 
8
8
 
9
- マイページ内のお知らせとやることリストにクリックイベントを発生させて、タブの切り替えしたいです。
9
+ マイページ内のお知らせとやることリストにクリックイベントを発生させて、タブの切り替え、切り替え内容を表示させたいです。
10
10
 
11
11
 
12
12
 
13
13
  # 実現したいこと
14
14
 
15
- クリックしたらその箇所が#whiteになり、そうではない箇所が#eeeになる。
16
-
17
15
  showクラスで表示される内容が変わる。
18
16
 
19
17
 
20
18
 
21
- # 仮説
19
+ タブをクリックしたらクリックした箇所が白くなり切り替えは実現できています。
22
20
 
23
- 検証ツールを用いてみると、jqueryの実装はできている(クリックたらactiveクラス、showクラスが一旦全て削除されクリックした箇所に付与される)で、scssの部分うまく反映されていない様です
21
+ かし、showの内容が反映されません
24
22
 
25
23
 
26
24
 
@@ -60,15 +58,15 @@
60
58
 
61
59
  background-color: #eee;
62
60
 
61
+ }
62
+
63
- &__item.active {
63
+      .active {
64
64
 
65
65
  background-color: white;
66
66
 
67
67
  display: inline-block;
68
68
 
69
69
  }
70
-
71
- }
72
70
 
73
71
  h3 {
74
72
 
@@ -85,6 +83,8 @@
85
83
  width: 100%;
86
84
 
87
85
  }
86
+
87
+     .show {
88
88
 
89
89
  }
90
90
 

1

修正

2020/08/23 06:48

投稿

keisuke.F
keisuke.F

スコア19

test CHANGED
File without changes
test CHANGED
@@ -48,8 +48,6 @@
48
48
 
49
49
  cursor: pointer;
50
50
 
51
- background-color: #eee;
52
-
53
51
  &__item {
54
52
 
55
53
  width: 50%;
@@ -59,6 +57,8 @@
59
57
  padding: 20px 60px;
60
58
 
61
59
  display: inline-block;
60
+
61
+ background-color: #eee;
62
62
 
63
63
  &__item.active {
64
64