質問編集履歴

2

いただいたコードを元に修正

2018/11/21 03:28

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -103,3 +103,63 @@
103
103
  URLは戻りますが、表示されているページはpage01の内容のままです。
104
104
 
105
105
  どうしたらブラウザの「戻る」ボタンが使えるようになりますか。
106
+
107
+
108
+
109
+
110
+
111
+ ボタンのホバーも合わせた修正コード
112
+
113
+
114
+
115
+ ```JS
116
+
117
+ $(window).on('popstate DOMContentLoaded',function(){
118
+
119
+ var h=location.hash;
120
+
121
+ if(h){
122
+
123
+ $('#page01, #page02').toggle(h=="");
124
+
125
+ $(h).fadeIn(1000).dequeue();
126
+
127
+ if(document.URL.match(/page01/)){
128
+
129
+ second_layout_page01();
130
+
131
+ } else if (document.URL.match(/page02/)){
132
+
133
+ second_layout_page02();
134
+
135
+ }else{
136
+
137
+ $('#page01,#page02').hide();
138
+
139
+ $('.btn01, .btn02').removeClass("active");
140
+
141
+ }
142
+
143
+ });
144
+
145
+
146
+
147
+ function second_layout_page01(){
148
+
149
+ $('.btn01').addClass('active');
150
+
151
+ $('.btn02').removeClass("active");
152
+
153
+ }
154
+
155
+
156
+
157
+ function second_layout_page02(){
158
+
159
+ $('.btn02').addClass('active');
160
+
161
+ $('.btn01').removeClass("active");
162
+
163
+ }
164
+
165
+ ```

1

無駄なコード削除

2018/11/21 03:28

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -23,12 +23,6 @@
23
23
  <li class="btn02">
24
24
 
25
25
  <a href="#page02">button2</a>
26
-
27
- </li>
28
-
29
- <li class="btn03">
30
-
31
- <a href="#page03">button3</a>
32
26
 
33
27
  </li>
34
28