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というクラスをつけるにはどうしたらいいでしょうか?
どうぞよろしくお願いします。

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2015/01/14 14:05:35
  • 終了:2015/01/14 19:23:11

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4537ベストアンサー獲得回数18882015/01/14 16:06:26

ポイント100pt

クリックしたもの以外のメニュー項目に 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/

他1件のコメントを見る
id:a-kuma3

<body>にクラスをつけたいです。
aboutやinfoのリンクをクリックすると、<body class="page">となり、TOPの場合は、<body>のままになるということです。

回答に追記しました。

2015/01/14 17:43:47
id:dekapurio

有難うございます!
パーフェクトでした。

2015/01/14 19:22:55

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません