jqueryで現在地（カレント）にclassを指定します。

yotigory

13年前

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