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

回答編集履歴

3

追加しよう

2018/11/21 03:43

投稿

yambejp
yambejp

スコア117912

answer CHANGED
@@ -62,4 +62,35 @@
62
62
  いいいい
63
63
  </div>
64
64
  </div>
65
+ ```
66
+
67
+ # ボタンにclassをつける
68
+ ```javascript
69
+ <style>
70
+ .active{font-weight:bold;}
71
+ .active:hover{background-Color:aqua;}
72
+ </style>
73
+ <script>
74
+ $(window).on('popstate DOMContentLoaded',function(){
75
+ var h=location.hash;
76
+ $('#page01,#page02').toggle(h=="");
77
+ $(h).fadeIn(1000).dequeue();
78
+ $('.btn01').toggleClass("active",h=="#page01");
79
+ $('.btn02').toggleClass("active",h=="#page02");
80
+ });
81
+ </script>
82
+ <nav>
83
+ <ul>
84
+ <li class="btn01"><a href="#page01">button1</a></li>
85
+ <li class="btn02"><a href="#page02">button2</a></li>
86
+ </ul>
87
+ </nav>
88
+ <div id="main">
89
+ <div id="page01">
90
+ ああああ
91
+ </div>
92
+ <div id="page02">
93
+ いいいい
94
+ </div>
95
+ </div>
65
96
  ```

2

調整

2018/11/21 03:43

投稿

yambejp
yambejp

スコア117912

answer CHANGED
@@ -39,18 +39,13 @@
39
39
  ```
40
40
  # 修正
41
41
  バグ修正しました、fadeInは意外にめんどくさいんです
42
+ (調整あり)
42
43
  ```javascript
43
44
  <script>
44
- $(function(){
45
- $(window).on('popstate',function(){
45
+ $(window).on('popstate DOMContentLoaded',function(){
46
- var h=location.hash;
46
+ var h=location.hash;
47
- if(h){
48
- $('#page01,#page02').hide();
47
+ $('#page01,#page02').toggle(h=="");
49
- $(h).fadeIn(1000).dequeue();
48
+ $(h).fadeIn(1000).dequeue();
50
- }else{
51
- $('#page01,#page02').show();
52
- }
53
- });
54
49
  });
55
50
  </script>
56
51
  <nav>

1

修正

2018/11/21 02:24

投稿

yambejp
yambejp

スコア117912

answer CHANGED
@@ -36,4 +36,35 @@
36
36
  </div>
37
37
  </div>
38
38
 
39
+ ```
40
+ # 修正
41
+ バグ修正しました、fadeInは意外にめんどくさいんです
42
+ ```javascript
43
+ <script>
44
+ $(function(){
45
+ $(window).on('popstate',function(){
46
+ var h=location.hash;
47
+ if(h){
48
+ $('#page01,#page02').hide();
49
+ $(h).fadeIn(1000).dequeue();
50
+ }else{
51
+ $('#page01,#page02').show();
52
+ }
53
+ });
54
+ });
55
+ </script>
56
+ <nav>
57
+ <ul>
58
+ <li><a href="#page01">button1</a></li>
59
+ <li><a href="#page02">button2</a></li>
60
+ </ul>
61
+ </nav>
62
+ <div id="main">
63
+ <div id="page01">
64
+ ああああ
65
+ </div>
66
+ <div id="page02">
67
+ いいいい
68
+ </div>
69
+ </div>
39
70
  ```