Warning: Trying to access array offset on value of type bool in /home/yotigory/codingmania.net/public_html/wp-content/plugins/search-everything/config.php on line 29
jqueryで現在地(カレント)にclassを指定します。 - CodingMania

2012/4/30

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

現在地に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;}