ページャー(ナビゲーションボタン)

現在いるページのURLと同じリンク先を持つナビゲーションボタンのみ色を変えて、現在のページ位置を知ることができます。




HTML

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>pager</title>
	<link rel="stylesheet" href="css/style.css">
	<link href="https://fonts.googleapis.com/css?family=Arima+Madurai" rel="stylesheet">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="js/pager.js"></script>
</head>
<body>

<ul id="pageNav">
	<li><a href="ULR/index.html">un</a></li>
	<li><a href="ULR/02.html">deux</a></li>
	<li><a href="ULR/03.html">trois</a></li>
	<li><a href="ULR/04.html">quatre</a></li>
</ul>
	
</body>
</html>

js

$(function(){
	var url = window.location.pathname;
	// console.log(url);
	$('#pageNav li a[href="'+url+'"]').parent().addClass('current');
});

// $(function(){
// $('#pageNav li').click(function()
// {
// var $href = $(this).attr('href');
// if(location.href.match($href)) {
// $(this).addClass('current');
// } else {
// $(this).removeClass('current');
// }
// });
// });

CSS

*{margin:0;
padding:0;}

a{text-decoration:none;
display:block;}

ul{width:50%;
margin:50px auto;
letter-spacing: -0.40em;}

ul li{list-style:none;
	letter-spacing: 1px;
	text-align: center;
	width:20%;
height:50px;
line-height:50px;
font-size:20px;
margin:0 2.5%;
display:inline-block;
font-family: 'Arima Madurai', cursive;}
ul li a{color:yellowgreen;
	background:#ffebcd;

	border-radius:3px;
box-shadow: 0px 3px #2f4f4f;}

ul li a:active{color:yellowgreen;
	border-radius:3px;
box-shadow: 0px 1px #2f4f4f;
position:relative;
top:3px;}

#pageNav .current a{background:pink !important;}