現在地にclassをつけるので、CSSで現在地表示ができます。
ヘッダーで、jquery.jsと後述のcurrent.jsを読み込んでいます。
単純にbodyタグに指定したidとナビゲーションのclass名が同じならclassにcurrentを追加します。
IDの場所は変更できます。
これでDWのテンプレにも使えます。
JSを読み込みます
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="js/current.js"></script>
[current.js]JavaScript
// Globalnav current $(function(){ var id = $("body").attr("id"); $(".mod_Gnavi ul li a."+id).addClass("current"); });
HTMl
<body id="home"> <div class="mod_Gnavi"> <ul class="ex_clearfix"> <li><a class="home" href="home.html"><img src="img/nav01.jpg" width="150" height="90" alt="Menu01" /></a></li> <li><a class="corp" href="corp.html"><img src="img/nav02.jpg" width="149" height="90" alt="Menu02" /></a></li> <li><a class="service" href="service.html"><img src="img/nav03.jpg" width="149" height="90" alt="Menu03" /></a></li> <li><a class="faq" href="faq.html"><img src="img/nav04.jpg" width="149" height="90" alt="Menu04" /></a></li> </ul> <!--mod_Gnavi_end --></div> </body>
CSS
/* GlobalNavi -----------------------------------------*/ .mod_Gnavi ul{ width:597px; overflow:hidden; position:relative; } .mod_Gnavi ul li{ height:45px; float:left; overflow:hidden; } .mod_Gnavi ul li a.current img{ margin-top:-45px; display:block; /* IE6隙間防止 */ } .mod_Gnavi ul li a{ display:block; } .mod_Gnavi ul li a:link {} .mod_Gnavi ul li a:visited {} .mod_Gnavi ul li a:hover {margin-top:-45px;} .mod_Gnavi ul li a:active {margin-top:-45px;}