回答編集履歴

3 追加しよう

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 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 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>

```