クリックでclassを付けたり消したりする

jQueryを用いてクラスを付けたり消したりする。
.toggleClassを使用します。
開いたり閉じたりするメニューを作る時に大変お世話になっています。

html

<style>
  #sample  > p {
         color:#000;
          text-align:center;
          background:#ddd;
		  -webkit-transition:.3s;
		   transition:.3s; 
   }
  #sample > p.on {
	  color:#fff;
	  background:#13B8FA;
  }
</style>
<body>
<div id="sample">
<p></p>
</div>
</body>

js

  $function(){
	  $("#content > p").click(function(){
		  $(this).toggleClass('on');
	  });
  });

クリックして下さい

  • コーダーのための計算機