ページャー(ナビゲーションボタン)
現在いるページの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'); // } // }); // });
*{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;}