回答編集履歴

3 追加しよう

yambejp

yambejp score 54065

2018/11/21 12:43  投稿

ちょっとバグバグしていますがpopstateを確認ください
```javascript
<script>
$(function(){
 $(window).on('popstate',function(){
   if(location.hash){
     $('[href="'+location.hash+'"]').trigger('click');
   }else{
     $('#page01,#page02').show();
   }
 });
 $('[href="#page01"]').on('click',function(){
   $('#page01').fadeIn(1000);
   $('#page02').hide();
 });
 $('[href="#page02"]').on('click',function(){
   $('#page01').hide();
   $('#page02').fadeIn(1000);
 });
});
</script>
<nav>
<ul>
 <li><a href="#page01">button1</a></li>
 <li><a href="#page02">button2</a></li>
</ul>
</nav>
<div id="main">
<div id="page01">
ああああ
</div>
<div id="page02">
いいいい
</div>
</div>
```
# 修正
バグ修正しました、fadeInは意外にめんどくさいんです
(調整あり)
```javascript
<script>
$(window).on('popstate DOMContentLoaded',function(){
 var h=location.hash;
 $('#page01,#page02').toggle(h=="");
 $(h).fadeIn(1000).dequeue();
});
</script>
<nav>
<ul>
 <li><a href="#page01">button1</a></li>
 <li><a href="#page02">button2</a></li>
</ul>
</nav>
<div id="main">
<div id="page01">
ああああ
</div>
<div id="page02">
いいいい
</div>
</div>
```  
 
# ボタンにclassをつける  
```javascript  
<style>  
.active{font-weight:bold;}  
.active:hover{background-Color:aqua;}  
</style>  
<script>  
$(window).on('popstate DOMContentLoaded',function(){  
 var h=location.hash;  
 $('#page01,#page02').toggle(h=="");  
 $(h).fadeIn(1000).dequeue();  
 $('.btn01').toggleClass("active",h=="#page01");  
 $('.btn02').toggleClass("active",h=="#page02");  
});  
</script>  
<nav>  
<ul>  
 <li class="btn01"><a href="#page01">button1</a></li>  
 <li class="btn02"><a href="#page02">button2</a></li>  
</ul>  
</nav>  
<div id="main">  
<div id="page01">  
ああああ  
</div>  
<div id="page02">  
いいいい  
</div>  
</div>  
```
2 調整

yambejp

yambejp score 54065

2018/11/21 11:24  投稿

ちょっとバグバグしていますがpopstateを確認ください
```javascript
<script>
$(function(){
 $(window).on('popstate',function(){
   if(location.hash){
     $('[href="'+location.hash+'"]').trigger('click');
   }else{
     $('#page01,#page02').show();
   }
 });
 $('[href="#page01"]').on('click',function(){
   $('#page01').fadeIn(1000);
   $('#page02').hide();
 });
 $('[href="#page02"]').on('click',function(){
   $('#page01').hide();
   $('#page02').fadeIn(1000);
 });
});
</script>
<nav>
<ul>
 <li><a href="#page01">button1</a></li>
 <li><a href="#page02">button2</a></li>
</ul>
</nav>
<div id="main">
<div id="page01">
ああああ
</div>
<div id="page02">
いいいい
</div>
</div>
```
# 修正
バグ修正しました、fadeInは意外にめんどくさいんです
(調整あり)  
```javascript
<script>
$(function(){
 $(window).on('popstate',function(){
   var h=location.hash;
   if(h){
     $('#page01,#page02').hide();
     $(h).fadeIn(1000).dequeue();
   }else{
     $('#page01,#page02').show();
   }
 });
$(window).on('popstate DOMContentLoaded',function(){
 var h=location.hash;
 $('#page01,#page02').toggle(h=="");
 $(h).fadeIn(1000).dequeue();
});
</script>
<nav>
<ul>
 <li><a href="#page01">button1</a></li>
 <li><a href="#page02">button2</a></li>
</ul>
</nav>
<div id="main">
<div id="page01">
ああああ
</div>
<div id="page02">
いいいい
</div>
</div>
```
1 修正

yambejp

yambejp score 54065

2018/11/21 11:15  投稿

ちょっとバグバグしていますがpopstateを確認ください
```javascript
<script>
$(function(){
 $(window).on('popstate',function(){
   if(location.hash){
     $('[href="'+location.hash+'"]').trigger('click');
   }else{
     $('#page01,#page02').show();
   }
 });
 $('[href="#page01"]').on('click',function(){
   $('#page01').fadeIn(1000);
   $('#page02').hide();
 });
 $('[href="#page02"]').on('click',function(){
   $('#page01').hide();
   $('#page02').fadeIn(1000);
 });
});
</script>
<nav>
<ul>
 <li><a href="#page01">button1</a></li>
 <li><a href="#page02">button2</a></li>
</ul>
</nav>
<div id="main">
<div id="page01">
ああああ
</div>
<div id="page02">
いいいい
</div>
</div>
```  
# 修正  
バグ修正しました、fadeInは意外にめんどくさいんです  
```javascript  
<script>  
$(function(){  
 $(window).on('popstate',function(){  
   var h=location.hash;  
   if(h){  
     $('#page01,#page02').hide();  
     $(h).fadeIn(1000).dequeue();  
   }else{  
     $('#page01,#page02').show();  
   }  
 });  
});  
</script>  
<nav>  
<ul>  
 <li><a href="#page01">button1</a></li>  
 <li><a href="#page02">button2</a></li>  
</ul>  
</nav>  
<div id="main">  
<div id="page01">  
ああああ  
</div>  
<div id="page02">  
いいいい  
</div>  
</div>  
```

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る