ナビゲーションを作る時、現在のページの見た目を変えておきたい場合があります。ページごとに任意のタグにactiveクラスを振るみたいな方法で凌げると思いますが、サイトがWebプログラムだったりするとこの方法だと不可能になります。が、jQueryで作れば、上手く行く可能性が高いので、URLに応じて任意のタグにactiveクラスを振るという事をjQueryを使って行っていきます。
INDEX
URLを分割する
URLに応じるので、まずは現在のページは何処なのかを知る必要があります。URLはwindow.location.hrefに格納されているので、これを取得すれば良いとなりますが、このまま取得すると使い勝手が悪いので、こいつを/で区切って配列にします。window.location.href.split("/")こんな感じでまずはURLを配列にします。実験してみたい人は、ブラウザのコンソール使って、適当なサイトで、このコードを叩いてみて下さい。
現在ページを特定する
既にできてるんですけど、まだ配列です。で、現在ページは配列の末尾か末尾の一個前に入ってるので、配列の末尾を取得します。urlの末尾に/がついているなら配列の末尾の1個前を取得します。これで現在のページを特定することができました。
href属性を抽出する
現在のページが分かったら、ナビゲーションの要素を走査して、href属性を抽出します。href属性に記述してあるURLとさっき特定したページの名前の一致を比較して、対象のDOMを制御します。図が分かり難いかもしれませんが、言ってることは感じです。フローチャートじゃないと分からない！って人向けにそれっぽいのを用意したので、こちらも見てみてください。書き方変かも知れないけどね。
コード
というわけでコード書いてみました。URL取得をしなければならないので、今回プレイグラウンドが使えませんでした。なのでGistに書いておきます。
