hampom TODAY

顔の黄色い人(@yashio)がなんか困っているようなので。

すごく解りづらいタイトルですが、 web app theme を使っていると ページヘッダー部の main-navigation 内の li 要素に対して active という class を指定すると、スタイルが変更される、という仕組みになっています。

上図「Active」という部分が該当します。

1ページずつ編集する事を考えると、ヘッダーやフッターをテンプレート化した際にとても面倒なので、私は以下のような javascript を使って対応しています。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>

<script type="text/javascript">
$(document).ready(function() {
  var uri = location.href;
  if (uri.match(/(https?[^?]+)(#.*)/)) {
    uri = RegExp.$1;
  }

  $("#main-navigation li").find("a[href='"+uri+"']").parent().addClass("active");
});

仕組みは、現在表示しているURLを取得して、そのURLをリンクしているa要素を探しだして parent() により親要素のclassに active を設定する。
という単純なものです。
このプログラムのままでは、リンクを完全なURL形式で書かないとリンクになりませんので注意が必要です。

2010.03.01 追記!

いまどきは、ページ送りなんかしたりすると URL に何ページなのかを付け加えたりするので、このプログラムだとそれらがうまく動かないよ！と顔が黄色い人(@yashio)にいわれたので、作り変えてみました。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>

<script type="text/javascript">
$(document).ready(function() {
var uri = location.href;
var path = location.pathname.split('/');

  if($("#main-navigation li").find("a[href='"+uri+"']").parent().addClass("active").length == 0) {
    for( numCnt = path.length - 1; numCnt > 0; numCnt-- ) {
      uri = uri.replace("/" + path[numCnt], "");
      if($("#main-navigation li").find("a[href='"+uri+"']").parent().addClass("active").length != 0)
        break;
    }
  }
});