jQueryにて現在表示しているURLにあわせてCSSを追加する方法を

質問

jQueryにて現在表示しているURLにあわせてCSSを追加する方法を教えてください。

現在、HTMLを
<ul id="#menu">
<li id="#menu_home"><a href="/index.html">HOME</a></li>
<li id="#menu_1"><a href="menu_1/foo.html">MENU_1</a></li>
<li id="#menu_2"><a href="menu_2/bar.html">MENU_2</a></li>
<li id="#menu_3"><a href="menu_3/com.html">MENU_3</a></li>
</ul>
のように組んでいます。

ローカルホスト上で開発テストしているので、URLは「http://localhost/～」となります。

現在表示しているURLにあわせて、たとえば、HOMEを表示している際には、
<li id="#menu_home"><a href="/index.html" class="active">HOME</a></li>
のようにCSSクラスをjQueryにて実現する方法を探しています。

JavaScriptで実現する方法はあるようなのですが、jQueryで実現できないかと試行錯誤しているものの、うまく行きません。

できる限りシンプルにしたいためjQueryやAjaxのプラグインは避けたいです。

どなたかお知恵を拝借できないでしょうか？
何卒よろしくお願いします。

回答No.1

yyr446

jQueryだけで簡単にできます。

<ul id="menu">
<li id="menu_home"><a href="/index.html">HOME</a></li>
<li id="menu_1"><a href="menu_1/foo.html">MENU_1</a></li>
<li id="menu_2"><a href="/JQtest8.htm">MENU_2</a></li>
<li id="menu_3"><a href="menu_3/com.html">MENU_3</a></li>
</ul>

に対して

$(function(){
$("#menu li a").each(function(){
if($(this).attr("href")==location.pathname)
$(this).toggleClass("active");
});
});

お礼

すいません、自己解決できました。
ありがとうございました。

補足

早々のご回答ありがとうございます。
いま試してみたところ、#menu li a hrefで指定しているページを表示している際はうまくいきました。しかし、menu_1/1st.htmlやmenu_1/2nd.htmlなどではうまくCSSクラスが付与されていないようです。これらにも対応するにはどうしたら良いでしょうか？