jQueryでﾒﾆｭｰをｸﾘｯｸした時にbodyにclassを付与したい｡現在､ﾒﾆｭｰは以下のようなURLになっています｡ <ul> <li><a href="#top"></li> <li><a href="#about" c…

jQueryでﾒﾆｭｰをｸﾘｯｸした時にbodyにclassを付与したい｡
現在､ﾒﾆｭｰは以下のようなURLになっています｡
<ul>
<li><a href="#top"></li>
<li><a href="#about" class="about"></li>
<li><a href="#info" class="info"></li>
<li><a href="#contact" class="contact"></li>
</ul>
#top以外のbodyに､pageというｸﾗｽをつけるにはどうしたらいいでしょうか？
どうぞよろしくお願いします｡

ｸﾘｯｸしたもの以外のﾒﾆｭｰ項目に page というｸﾗｽをつける､ということでしょうか｡

<ul>
<li><a href="#top">TOP</a></li>
<li><a href="#about" class="about">ABOUT</a></li>
<li><a href="#info" class="info">INFO</a></li>
<li><a href="#contact" class="contact">CONTACT</a></li>
</ul>

<script>
$(function() {
 $("UL LI A").each(function() {
 var a = $(this);
 if (a.attr("href") != "#top") {
 a.attr("class", a.attr("class") + " page");
 }
 });
 $("UL LI A").on("click", function() {
 var me = $(this);
 $("UL LI A").each(function() {
 var a = $(this);
 var clz = a.attr("class");
 if (typeof clz != "undefined") {
 a.attr("class", clz.replace(/page/, ""));
 }
 if (me.attr("href") != a.attr("href")) {
 a.attr("class", a.attr("class") + " page");
 }
 });
 });
});
</script>

jsFiddle で試したのが､こちらです｡
http://jsfiddle.net/7sdfLjgw/

追記です｡

<body>にｸﾗｽをつけたいです｡
aboutやinfoのﾘﾝｸをｸﾘｯｸすると､<body class="page">となり､TOPの場合は､<body>のままになるということです｡

では､こんな感じで｡

<ul>
<li><a href="#top">TOP</a></li>
<li><a href="#about" class="about">ABOUT</a></li>
<li><a href="#info" class="info">INFO</a></li>
<li><a href="#contact" class="contact">CONTACT</a></li>
</ul>

<script>
$(function() {
 $("UL LI A").on("click", function() {
 var a = $(this);
 var body = $("BODY");
 if (a.attr("href") != "#top") {
 if (body.attr("class") != "page") {
 $("BODY").attr("class", "page");
 }
 } else {
 body.attr("class", "");
 }
 });
});
</script>

jsFiddle で試したのが､こちらです｡
http://jsfiddle.net/7sdfLjgw/1/