teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

誤字脱字

2021/09/09 03:02

投稿

ametori
ametori

スコア0

title CHANGED
File without changes
body CHANGED
@@ -24,7 +24,38 @@
24
24
 
25
25
  ```
26
26
  ```sass
27
+ li {
28
+ &:not(:first-child){
29
+ margin-left: 40px;
30
+ }
31
+ a {
32
+ color: #fff;
33
+ text-decoration: none;
34
+ position: relative;
35
+
36
+ &::after {
37
+ content:"";
38
+ width:100%;
39
+ position: absolute;
40
+ bottom: -10px;
41
+ height: 2px;
42
+ left: 0px;
43
+ background: transparent;
44
+ transition: all 0.3s ease 0s;
45
+ }
27
46
 
47
+ &:hover,
48
+ &.is-active {
49
+
50
+ &::after {
51
+ background: tomato;
52
+ }
53
+
54
+ }
55
+
56
+ }
57
+ }
58
+ }
28
59
  ```
29
60
  ```jQuery
30
61
 

1

誤字脱字

2021/09/09 03:02

投稿

ametori
ametori

スコア0

title CHANGED
File without changes
body CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  ### 発生している問題・エラーメッセージ
6
6
 
7
- ページリンクをクリックすると
7
+ ページリンクをクリックすると下線を表示することはできるのですが、クラスでの指定を行うとクリック時にメニューの全てのリンクの下線を削除することができない理由を知りたいです
8
8
 
9
9
  ### 該当のソースコード
10
10
 
@@ -35,9 +35,11 @@
35
35
  });
36
36
  ```
37
37
  ### 試したこと
38
-
38
+ ```jQuery
39
+ $('.header__nav li a').on('click', function() {
40
+ $('.header__nav li a').removeClass('is-active');
41
+ $(this).addClass('is-active');
42
+ return false;
43
+ });
44
+ ```
39
- ここ問題対して試したこを記載てください
45
+ クラスを指定せず階層指定する正常に動作ます
40
-
41
- ### 補足情報(FW/ツールのバージョンなど)
42
-
43
- ここにより詳細な情報を記載してください。