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

回答編集履歴

2

タイトル修正

2018/08/28 07:19

投稿

Yousuck
Yousuck

スコア349

answer CHANGED
@@ -1,6 +1,6 @@
1
1
  このコードでいくなら、まず#gnavのaにidを振らないと駄目ですよ。
2
2
 
3
- ```
3
+ ```HTML
4
4
  <ul id="gnav" class="navigation-list">
5
5
  <li class="list-item"><a id="top" href="#top" class="underline side">Home</a></li>
6
6
  <li class="list-item"><a id="about" href="#about" class="underline side">About</a></li>
@@ -15,7 +15,7 @@
15
15
  の書き方を修正。
16
16
 
17
17
 
18
- ```
18
+ ```JavaScript
19
19
  $(function(){
20
20
  var navLink = $('#gnav li a');
21
21
 
@@ -64,7 +64,7 @@
64
64
 
65
65
  あと、CSS
66
66
 
67
- ```
67
+ ```CSS
68
68
  #gnav a {
69
69
  text-decoration: none;
70
70
  color: #000000;

1

CSS追記しました

2018/08/28 07:19

投稿

Yousuck
Yousuck

スコア349

answer CHANGED
@@ -9,10 +9,12 @@
9
9
 
10
10
  ```
11
11
 
12
+
12
13
  で、scriptは
13
14
  var targetContentsTop = $(targetContents).offset().top;
14
15
  の書き方を修正。
15
16
 
17
+
16
18
  ```
17
19
  $(function(){
18
20
  var navLink = $('#gnav li a');
@@ -59,4 +61,23 @@
59
61
 
60
62
  ```
61
63
 
64
+
65
+ あと、CSS
66
+
67
+ ```
68
+ #gnav a {
69
+ text-decoration: none;
70
+ color: #000000;
71
+ transition: color 0.3s;
72
+ border-bottom:1px solid transparent;
73
+ }
74
+
75
+ #gnav a.current {
76
+ color: #1d3d36;
77
+ opacity: 0.6;
78
+ border-bottom-color: #1d3d36;
79
+ }
80
+ ```
81
+
82
+
62
83
  以上です。