質問編集履歴
2
いただいたコードを元に修正
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
無駄なコード削除
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
|
|