現在URLと指定リンク先が同一のときにクラスthisを自動付与するJS


現在URLとページ内リンクのリンク先URLが同じとき、
いちいち手書きでクラスthisを追加するのが面倒なので、
自動的にthisが付与されるjavascriptを作ってみました。

このjsを追加するだけで、
グローバルナビの反転もテキストリンクの背景付与も
各クラスのa.thisに対してcssでスタイルを定義するだけでよくなります。

▼デモページ
http://www.kuzumi.net/sample/this/

▼html

<p class="cap">■現在のURLと各リンクの指定リンク先が同じ場合、クラス名にthisを追加</p>
<ol id="navi">
<li><a href="http://www.kuzumi.net/sample/this/index.html" class="test">URLパス(http://www.kuzumi.net/sample/this/index.html)</a></li>
<li><a href="/sample/this/index.html" class="test">ルートパス1(/sample/this/index.html)</a></li>
<li><a href="/sample/this/">ルートパス2(/sample/this/)</a></li>
<li><a href="index.html">相対パス1(index.html)</a></li>
<li><a href="./">相対パス2(./)</a></li>
<li><a href="./test.html">現在ページにリンクしていないのでthisが付与されません。</a></li>
</ol>
<ul class="test">
<li><a href="index.html"><img src="btn1.gif" alt="現在ページにリンクしたのでthisが付与されます。" /></a> </li>
<li><a href="test1.html"><img src="btn2.gif" alt="現在ページにリンクしていないのでthisが付与されません。" /></a></li>
</ul>

▼css

<style type="text/css">
p.cap{
	font-size:80%;
}
li{
	margin:20px;
	padding:0;
	font-size:80%;
}
/* thisの付与されたaタグの背景を黄色くする */
a.this{
	background:#ff0;
}
ul.test li a{
	display:block;
	overflow:hidden;
	height:20px;
	width:150px;
	background:url(btn1.gif) no-repeat 0 0;
}
/* ulのクラスtest内のaタグにthisが付与されたら:hover時と同じスタイルを適用する */
ul.test li a.this,
ul.test li a:hover{
	background-position:0 -20px;
}
ul.test li a img{
	display:none;
}
</style>

▼JavaScript

<script type="text/javascript">
window.onload = function() {
var this_url_class = "this"; // 付与したいクラス名を設定
var url = location.href; // 現在URLのパスを変数urlに格納
url = url.replace(/#.*?$/g, ""); // アンカーを含む場合は削除
url = url.replace(//index(s)?.htm(l)?$/g, "/"); // index.html、index.htm、index.shtmlは省略
var re = new RegExp("^" + url + "$"); // match関数用正規表現にurlの値を格納
var anc = document.getElementsByTagName("a"); // ドキュメント内のaタグを取得して変数ancに格納
for(var i=0;i<anc.length;i++){ // 変数ancに格納されたaタグの数だけループ
var link = anc[i].href; // aタグのURLを変数linkに格納
link = link.replace(//index(s)?.htm(l)?$/g, "/"); // index.html、index.htm、index.shtmlは省略
var c = anc[i].className; // aタグのクラス名を変数cに格納
if(link.match(re)){ // 変数linkが変数urlとマッチしたら
if(c != ""){ // aタグに既存のクラス名が存在したら
anc[i].className = c + " " + this_url_class; // 既存のクラス名 + this に書き換える
}else{ // aタグに既存のクラス名が存在しなかったら
anc[i].className = this_url_class; // クラス名thisを付与
}
}
}
} // window.onload
</script>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)