説明が難しくて伝わるのか不安なんですが
top から page01に遷移したときに下記のコードを用いて読み込みをしているのですが

該当のソースコード

html
1<nav>
2 <ul>
3  <li class="btn01">
4    <a href="#page01">button1</a>
5  </li>
6  <li class="btn02">
7    <a href="#page02">button2</a>
8  </li>
9 </ul>
10</nav>
11
12<div id="main">
13 <div id="page01">
14　　ああああ
15　</div>
16 <div id="page02">
17　　いいいい
18　</div>
19</div>
20

JS
1$(function(){
2　if(document.URL.match(/page01/)){
3   $('#page01').fadeIn(1000);
4   $('#page02').css({"display: none"});
5　} else if(document.URL.match(/page02/)) {
6   $('#page02').fadeIn(1000);
7   $('#page01').css({"display: none"});
8　}
9});

この場合、ブラウザの「戻る」ボタンが使えなくなってしまいます。

例：
https://teratail.com/

↓ 遷移

https://teratail.com/#page01

↓ 戻る

https://teratail.com/

URLは戻りますが、表示されているページはpage01の内容のままです。
どうしたらブラウザの「戻る」ボタンが使えるようになりますか。

ボタンのホバーも合わせた修正コード

JS
1 $(window).on('popstate DOMContentLoaded',function(){
2  var h=location.hash;
3  if(h){
4   $('#page01, #page02').toggle(h=="");
5   $(h).fadeIn(1000).dequeue();
6   if(document.URL.match(/page01/)){
7    second_layout_page01();
8   } else if (document.URL.match(/page02/)){
9    second_layout_page02();
10   }else{
11    $('#page01,#page02').hide();
12    $('.btn01, .btn02').removeClass("active");
13   }
14 });
15
16function second_layout_page01(){
17 $('.btn01').addClass('active');
18 $('.btn02').removeClass("active");
19}
20
21function second_layout_page02(){
22 $('.btn02').addClass('active');
23 $('.btn01').removeClass("active");
24}

行動規範の内容に同意します

回答1件

ベストアンサー

ちょっとバグバグしていますがpopstateを確認ください

javascript
1<script>
2$(function(){
3  $(window).on('popstate',function(){
4    if(location.hash){
5      $('[href="'+location.hash+'"]').trigger('click');
6    }else{
7      $('#page01,#page02').show();
8    }
9  });
10  $('[href="#page01"]').on('click',function(){
11    $('#page01').fadeIn(1000);
12    $('#page02').hide();
13  });
14  $('[href="#page02"]').on('click',function(){
15    $('#page01').hide();
16    $('#page02').fadeIn(1000);
17  });
18});
19</script>
20<nav>
21 <ul>
22  <li><a href="#page01">button1</a></li>
23  <li><a href="#page02">button2</a></li>
24 </ul>
25</nav>
26
27<div id="main">
28 <div id="page01">
29ああああ
30</div>
31 <div id="page02">
32いいいい
33</div>
34</div>
35

修正

バグ修正しました、fadeInは意外にめんどくさいんです
(調整あり)

javascript
1<script>
2$(window).on('popstate DOMContentLoaded',function(){
3  var h=location.hash;
4  $('#page01,#page02').toggle(h=="");
5  $(h).fadeIn(1000).dequeue();
6});
7</script>
8<nav>
9 <ul>
10  <li><a href="#page01">button1</a></li>
11  <li><a href="#page02">button2</a></li>
12 </ul>
13</nav>
14<div id="main">
15 <div id="page01">
16ああああ
17</div>
18 <div id="page02">
19いいいい
20</div>
21</div>

ボタンにclassをつける

javascript
1<style>
2.active{font-weight:bold;}
3.active:hover{background-Color:aqua;}
4</style>
5<script>
6$(window).on('popstate DOMContentLoaded',function(){
7  var h=location.hash;
8  $('#page01,#page02').toggle(h=="");
9  $(h).fadeIn(1000).dequeue();
10  $('.btn01').toggleClass("active",h=="#page01");
11  $('.btn02').toggleClass("active",h=="#page02");
12});
13</script>
14<nav>
15 <ul>
16  <li class="btn01"><a href="#page01">button1</a></li>
17  <li class="btn02"><a href="#page02">button2</a></li>
18 </ul>
19</nav>
20<div id="main">
21 <div id="page01">
22ああああ
23</div>
24 <div id="page02">
25いいいい
26</div>
27</div>