URLと同じリンク先を装飾する

サンプル

使い方

たとえば、id「area-list」内のリンク先が現在開いているURL「http://www.tk1975.com/contents/current_url.php」と同じ場合、そのaタグを含むliタグにclass属性「over」を生成することとします。

(x)html（このページのサイドナビ「contents」から抜粋）

<div id="area-list">
<h2><img src="http://www.tk1975.com/img/txt/contents.gif" alt="コンテンツ一覧" width="65" height="10" /></h2>
<ul>
<li>
<h3><span>01</span><a href="http://www.tk1975.com/contents/imgchange.php">マウスオーバー時の画像置換</a></h3>
<p>マウスオーバー時の画像置換をCSSとJavascriptを使って実装する。</p>
</li>
<li>
<h3><span>02</span><a href="http://www.tk1975.com/contents/hover.php">マウスオーバー時にclassを追加／削除</a></h3>
<p>IE6以下で、aタグ要素以外の疑似クラス「:hover」を機能させる。</p>
</li>
<li class="over">
<h3><span>03</span><a href="http://www.tk1975.com/contents/current_url.php">URLと同じリンク先を装飾する</a></h3>
<p>リンク先が現在開いているURLと同じ場合、リンクを含むタグにclass属性を追加する。</p>
</li>
</ul>
<hr />
</div><!--#area-list-->

「class="over"」は、そのliタグ要素内に現在開いているURL「http://www.tk1975.com/contents/current_url.php」と同じリンク先があるため、Javascriptで自動生成されます。

CSS

#area-list li.over{
background-color:#ffff66;
color:#333;
cursor:pointer;
}

Javascript（tk1975_config.jsへの記述例）

function currentURL(){
var area_id = "area-list";
var elem = "li";
var class_name = "over";
tk1975_currentURL(area_id,elem,class_name);
}
prepareOnloadFunction(currentURL);

• ※area_idは、対象範囲（現在開いているURLと同じリンク先があるかどうかを調査する範囲）のid名です。
  elemは、現在開いているURLと同じリンク先があった場合、class属性を追加したいタグ要素名です。
  class_nameは、現在開いているURLと同じリンク先を含むタグ要素に追加するclass名です。
• ※area_idを「var area_id = "";」にすると、対象範囲はbody内すべてになります。
  また、elemを「var elem = "";」にすると、現在開いているURLと同じリンク先のaタグ要素に設定されます。
• ※関数「prepareOnloadFunction」に関しては、「DOM Scriptingを利用する上で知っておくべきこと」を参照してください。

思考回路 〜 tk1975_currentURL(area_id,elem,class_name); の流れ〜

1. 現在のURLを抽出
2. 対象箇所のリンク箇所を抽出
3. リンクが一致した場合、class属性を追加

対象箇所のリンク箇所を抽出する際をよく吟味する必要がある。リンク先の書き方は、「http://」から始まる絶対URIだったり、「/」から始まる絶対パスだったり、相対パスだったり様々である。さらに、indexは省略できるため「/」やフォルダ名で終わる場合が考えられる。

解説 〜 tk1975_currentURL(area_id,elem,class_name); の詳細〜

Javascript（tk1975.js）

1. function tk1975_currentURL(area_id,elem,class_name){
2. if(!document.getElementById || !document.getElementsByTagName || class_name == "") return false;レガシーブラウザの場合、もしくはclass_nameの指定がない場合は処理を中止
3. if(area_id == ''){var area = document.getElementsByTagName("body")[0];}area_idの指定がない場合、body内すべてを対象にする
4. else if(!document.getElementById(area_id)){ return false; }area_idがない場合は処理を中止
5. else{var area = document.getElementById(area_id);}
6. if(elem == ''){elem = "a";}elemの指定がない場合、aタグを対象にする
7. var elems = area.getElementsByTagName(elem);
8. if(elems.length == 0) return false;対象とするタグがない場合は処理を中止
9. var currentFile = location.href.split("/").reverse()[0];現在開いているページのファイル名のみを抽出
10. 【10-13】indexページの場合の処理 if(currentFile == "" || currentFile.indexOf("index") != -1){
11. currentFile = location.href.split("/").reverse()[1];
12. if(currentFile.indexOf(".") != -1){currentFile = "top";}
13. }【14-25】対象エリア内の対象タグ要素内のリンク先のファイル名を抽出
14. for(var i=0; i<elems.length; i++){
15. if(elem == "a"){var elemURL = elems[i].getAttribute("href");}
16. if(elem != "a"){
17. var elemLink = elems[i].getElementsByTagName("a")[0];
18. var elemURL = elemLink.getAttribute("href");
19. }
20. var elemFile = elemURL.split("/").reverse()[0];
21. 【21-25】indexページの場合の処理 if(elemURL.split("/").reverse()[1] == ""){elemFile = "top";}
22. else if(elemFile == "" || elemFile.indexOf("index") != -1){
23. elemFile = elemURL.split("/").reverse()[1];
24. if(elemFile.indexOf(".") != -1){elemFile = "top";}
25. }【26-28】現在のファイル名とリンク先が同じ場合はclass属性を追加する
26. if(elemFile == currentFile){
27. addClass(elems[i],class_name);
28. return false;
29. }
30. }
31. }

• ※関数「addClass(elems[i],class_name);」に関しては、「マウスオーバー時にclassを追加／削除」を参照してください。

コメント＆トラックバック

この記事に関するご意見・ご感想をお聞かせください

この記事へのトラックバック

http://search-result.org/mt-tb.cgi/3