更新日： 2018/04/19

要素クリックでclassを付与するJqueryコード。コピペで簡単

要素をクリックした時にclassを付与して、CSSでゴニョゴニョしたいでしょ？
そんな時にJqueryを使うと非常に簡単に実現できるので、方法を知らない方はぜひご参照ください。
コピペで簡単に実装できますよ。
以下より本文を御覧ください。

Jqueryを使用します

「要素クリックでclass付与」を実現しましょう。

今回はJqueryを使用して実装します。

<head></head>要素の中にJqueryを呼び出す記述を書いて下さい。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

▲コピペでOK。

こんな風に、Googleのサーバーからjqueryを使わせてもらうと超高速ですよ。

こういうの、CDNサービスと言います。

今回はクラスが付与されたpタグに対して作業してみましょう。

このpタグをクリックした時に、pタグに「honya」というクラスが追加されるようにします。

<script> $(function(){ $(".aaa").on("click", function() { $(this).toggleClass("honya");//追加部分 }); }); </script>

上記コードをpタグの上辺りに書いておけばOKです。

簡単でしたね。

再びpタグをクリックすると「honya」タグが外れます。

再読込するまで、一度付与したclassを外したくない..という人は以下のjaueryコードを使おう。

<script>
    $(function(){
        $(".aaa").on("click", function() {
            $(this).addClass("honya");//追加部分
        });
    });
</script>

これで何度pタグをクリックしても「honya」クラスは外れません。

.aaaの要素指定箇所や、付与するclassを書き換えて、色々実験してみて下さい。

簡単でよかったですね。