« 煌十夜マニュアル | メイン | シュートを狙え »

2005年06月17日

カレントページへのリンクを無効化する [DOM]

要約

現在いる Web ページと同じ URL に対して張られたアンカータグを、 リンクとして機能しないものへと変更します。

用途・目的

各ページ間で共通したグローバルナビゲーションを使用する場合、 現在いるページに対するリンクが無効化されていないと自分がどの場所にいるのかがわかりにくくなります。

通常はサーバサイドで動的に変更したり、手動で差し替えるものですが、 DOM を使用することで自動的に自分に向けられたアンカー識別してリンクを外すことができるようになります。

これにより、少ない手間で閲覧者のユーザビリティ向上を計ります。

スクリプト概要

  1. ページ内に存在する全てのアンカーを取得
  2. この中で、自分と同じ URL を href 属性に持ったアンカーのみを抽出
  3. 該当するアンカーの href 属性を除去
  4. 該当するアンカーに任意のクラス名を付加（オプション）

DOM 未対応時の挙動

自分に向けられたアンカーも、通常のリンクとして機能します。

コード


//----------------------------------------------------------
// カレントページへのリンクを無効化
// 引数：付加するクラス名（オプション）
// 返値：無効化したリンクの数
//----------------------------------------------------------
function removeCurrentLink(addClassName){

  var count = 0;  // 無効化した数

  // 全アンカーの取得
  var elmsAnchor = document.getElementsByTagName("a");

  for(var i=0; i<elmsAnchor.length; i++){
    var elmAnchor = elmsAnchor.item(i);

    // 自分を指すリンクであれば
    if(elmAnchor.href == location.href){
      elmAnchor.removeAttribute("href");    // 属性を削除

      // 引数でクラス名が指定されていれば
      if(addClassName){
        elmAnchor.className = addClassName; // クラス名を付加
      }
      count++;
    }
  }
  return count;
}

ちなみに、クラス名を付加する際に正しいクラス名の取得方法で取り上げた addClass 関数を使うと、既存のクラス名を上書きしないのでベターです。

導入方法

currentlink.txt

上記のファイルを拡張子を .js に変更してアップロード。 その後、適用したいHTMLのヘッダ部分に以下のタグを記述してください。

<script type="text/javascript" src="currentlink.js"></script>

投稿者 : 11:40 | コメント (0)

コメント

コメントしてください




保存しますか?

(書式を変更するような一部のHTMLタグを使うことができます)