質問編集履歴
2
いただいたコードを元に修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -50,4 +50,34 @@
|
|
|
50
50
|
https://teratail.com/
|
|
51
51
|
|
|
52
52
|
URLは戻りますが、表示されているページはpage01の内容のままです。
|
|
53
|
-
どうしたらブラウザの「戻る」ボタンが使えるようになりますか。
|
|
53
|
+
どうしたらブラウザの「戻る」ボタンが使えるようになりますか。
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
ボタンのホバーも合わせた修正コード
|
|
57
|
+
|
|
58
|
+
```JS
|
|
59
|
+
$(window).on('popstate DOMContentLoaded',function(){
|
|
60
|
+
var h=location.hash;
|
|
61
|
+
if(h){
|
|
62
|
+
$('#page01, #page02').toggle(h=="");
|
|
63
|
+
$(h).fadeIn(1000).dequeue();
|
|
64
|
+
if(document.URL.match(/page01/)){
|
|
65
|
+
second_layout_page01();
|
|
66
|
+
} else if (document.URL.match(/page02/)){
|
|
67
|
+
second_layout_page02();
|
|
68
|
+
}else{
|
|
69
|
+
$('#page01,#page02').hide();
|
|
70
|
+
$('.btn01, .btn02').removeClass("active");
|
|
71
|
+
}
|
|
72
|
+
});
|
|
73
|
+
|
|
74
|
+
function second_layout_page01(){
|
|
75
|
+
$('.btn01').addClass('active');
|
|
76
|
+
$('.btn02').removeClass("active");
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
function second_layout_page02(){
|
|
80
|
+
$('.btn02').addClass('active');
|
|
81
|
+
$('.btn01').removeClass("active");
|
|
82
|
+
}
|
|
83
|
+
```
|
1
無駄なコード削除
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -12,9 +12,6 @@
|
|
|
12
12
|
<li class="btn02">
|
|
13
13
|
<a href="#page02">button2</a>
|
|
14
14
|
</li>
|
|
15
|
-
<li class="btn03">
|
|
16
|
-
<a href="#page03">button3</a>
|
|
17
|
-
</li>
|
|
18
15
|
</ul>
|
|
19
16
|
</nav>
|
|
20
17
|
|