WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

ページャー付きタブ切り替え

f:id:mmmmofu:20170411000720p:plain

デモはこちら

http://efu.sakura.ne.jp/web/paging/

1ページ目

2ページ目

3ページ目

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>ページャー付きタブ切り替え</title>
	<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
	<script src="script.js"></script>
	<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="wrapper">
		<h1>ページャー付きタブ切り替え</h1>
		<p>直接ページのハッシュを叩いてもそのページに飛ぶことができます。</p>
		<ul class="content">
			<li class="content__item" id="page1">
				<h2>1ページ目</h2>
			</li>
			<li class="content__item" id="page2">
				<h2>2ページ目</h2>
			</li>
			<li class="content__item" id="page3">
				<h2>3ページ目</h2>
			</li>
		</ul>
		<div class="control">
		</div>
	</div>
</body>
</html>
html,body,h1,h2,p,ul,li,div {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
  "Hiragino kaku Gothic ProN",
  Meiryo,
  sans-serif;
}

ul, li {
  list-style: none;
}

h1 {
  padding-bottom: 10px;
  text-align: center;
}

p {
  padding-bottom: 30px;
  text-align: center;
}

.wrapper {
  width: 760px;
  margin: 50px auto 300px;
}

.content {
  margin-bottom: 20px;
}

.content .content__item {
  display: none;
  width: 760px;
  height: 500px;
  border: 5px solid #000;
  box-sizing: border-box;
}

.content .content__item h2 {
  text-align: center;
  padding-top: 100px;
  font-size: 50px;
}

.content .selected {
  display: block;
}

.control {
  text-align: center;
}

.control .prev, .control .next {
  display: inline-block;
  cursor: pointer;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 24px;
  -webkit-transition: all .3s linear;
  -o-transition: all .3s linear;
  transition: all .3s linear;
}

.control .prev:hover, .control .next:hover {
  opacity: 0.6;
}

.control .prev.none, .control .next.none {
  display: none;
}

.control .pager {
  display: inline-block;
  margin: 0 30px;
}

.control .pager .pager__item {
  display: inline-block;
  margin: 0 6px;
}

.control .pager .pager__item a {
  display: block;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 34px;
  font-family: 'Josefin Sans', sans-serif;
  color: #000;
  font-size:24px;
  text-decoration: none;
  border: 1px solid #000;
  border-radius: 50%;
  -webkit-transition: all .3s linear;
  -o-transition: all .3s linear;
  transition: all .3s linear;
}

.control .pager .pager__item.active a {
  background: #000;
  color: #FFF;
}

.control .pager .pager__item:hover a {
  background: #000;
  color: #FFF;
}
$(function(){

  var html = '';//HTML用
  var pageAll = $('.content__item').length;//ページ数
  var pageNum;//ページャー作成用
  var currentPage;
  var prevPage;//前のページ
  var nextPage;//次のページ
  var hash = location.hash;
  var target = $('.content').offset().top;//スクロールアニメーションで上に移動する

  //ページャー作成
  html += '<p class="prev">PREV</p>';
  html += '<ul class="pager">';
  for(var i = 0; i < pageAll; i++) {
    pageNum = i + 1;
    html += '<li class="pager__item"><a href="#page' + pageNum + '">' + pageNum + '</a></li>';
  }
  html += '</ul>';
  html += '<p class="next">NEXT</p>';
  $('.control').append(html);

  //見えるページを制御
  if(hash.length) {
    currentPage = parseInt(hash.replace('#page' , '')) - 1;
  } else {
    currentPage = 0;
    window.location.hash = 'page1';
  }

  //ページが一番最初の場合PREVを非表示
  if(currentPage === 0) {
    $('.prev').addClass('none');
  }
  //ページが一番最後の場合NEXTを非表示
  if(currentPage === $('.content .content__item').length - 1) {
    $('.next').addClass('none');
  }

 //現在のページを表示
$('.content .content__item').eq(currentPage).addClass('selected');
$('.pager .pager__item').eq(currentPage).addClass('active');


  //ページャーの挙動
  $('.pager .pager__item').on('click', function(){//数字をクリック
    currentPage = $(this).index();
    $('.content .content__item').removeClass('selected');
    $('.content .content__item').eq(currentPage).addClass('selected');
    $('.pager .pager__item').removeClass('active');
    $(this).addClass('active');
    $('body,html').animate({
      scrollTop: target
    },200);
    if(currentPage === 0) {
      $('.prev').addClass('none');
    } else {
      $('.prev').removeClass('none');
    }
    if(currentPage === $('.content .content__item').length - 1) {
      $('.next').addClass('none');
    } else {
      $('.next').removeClass('none');
    }
  });

  $('.prev').on('click', function(){//PREVをクリック
    hash = location.hash;
    currentPage = currentPage - 1;
    prevPage = parseInt(hash.replace('#page' , '')) - 1;;
    window.location.hash = 'page' + prevPage;
    $('.content .content__item').removeClass('selected');
    $('.content .content__item').eq(currentPage).addClass('selected');
    $('.pager .pager__item').removeClass('active');
    $('.pager .pager__item').eq(currentPage).addClass('active');
    $('body,html').animate({
      scrollTop: target
    },200);
    if(currentPage === 0) {
      $('.prev').addClass('none');
    } else {
      $('.prev').removeClass('none');
    }
    if(currentPage === $('.content .content__item').length - 1) {
      $('.next').addClass('none');
    } else {
      $('.next').removeClass('none');
    }
  });

  $('.next').on('click', function(){//NEXTをクリック
    hash = location.hash;
    currentPage = currentPage + 1;
    nextPage = parseInt(hash.replace('#page' , '')) + 1;
    window.location.hash = 'page' + nextPage;
    $('.content .content__item').removeClass('selected');
    $('.content .content__item').eq(currentPage).addClass('selected');
    $('.pager .pager__item').removeClass('active');
    $('.pager .pager__item').eq(currentPage).addClass('active');
    $('body,html').animate({
      scrollTop: target
    },200);
    if(currentPage === 0) {
      $('.prev').addClass('none');
    } else {
      $('.prev').removeClass('none');
    }
    if(currentPage === $('.content .content__item').length - 1) {
      $('.next').addClass('none');
    } else {
      $('.next').removeClass('none');
    }
  });
});