jQueryでメニューをクリックした時にbodyにclassを付与したい。

Question

dekapurio

30

25もっと見る

100pt

ウェブ制作

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回まで

登録：2015/01/14 14:05:35
終了：2015/01/14 19:23:11

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

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

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

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

リクエスト送信済

回答リクエストを送信したユーザーはいません

a-kuma3 · Accepted Answer · 2015-01-14T16:06:26+09:00

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

jQueryでメニューをクリックした時にbodyにclassを付与したい。

ベストアンサー

a-kuma3497321542015/01/14 16:06:26

コメント（0件)

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