Home > javascript > ある階層にいる時にはカレント(アクティブ)表示のCSSを追加するjavascript

ある階層にいる時にはカレント(アクティブ)表示のCSSを追加するjavascript

  • Posted by: master
  • javascript

よくあるメニューナビゲーションでのカレント(アクティブ)表示時の追加CSS

例えば http://example.com/hoge/ のようなhogeのディレクト配下にいる時には常に特定のCSSタグを追加するようなイメージです。

実際のコードはこちら

function CurrentTab( id ) {
    var e0, li = document.getElementById(id).childNodes;
    for (i = 0; i < li.length; i++)
        if ((e0 = li[i]) && e0.tagName && e0.tagName.toLowerCase() == 'li') {
            var e1, a = e0.childNodes;
            for (j = 0; j < a.length; j++)
                if ((e1 = a[j]) && e1.tagName && e1.tagName.toLowerCase() == 'a') {
                    if (location.href.indexOf( e1.href ) != -1)
                        e0.className = 'current';
                }
        }
}
CurrentTab( 'menu' );

HTMLだと ulにIDとしてmenuがついている想定です。

ul > li > a みたいなように下がって検索して現在のURLとaタグのURLが一致する場合はliタグにclassでcurrentをつけるJSコードです。

デモ動作

意外と需要があるようなのでデモを貼り付けます。

貼り付けているデモではiframeなので現在のURLはこのデモ上では http://fiddle.jshell.net/pJNB9/4/show/light/ になっています。よってhoge3がアクティブになり li class="current" と追加されています。

Home > javascript > ある階層にいる時にはカレント(アクティブ)表示のCSSを追加するjavascript

Search

Feeds

Return to page top