HOME > > > > >

.toggleClass(className)

.toggleClass( className )

引数

(string)className
追加、削除するクラス名。スペースで区切りで複数設定可能

サンプル

classNameで指定されたクラス名があれば削除、なければ追加される。

実行結果

  • 設定なし
  • class="highLight"
  • class="firstClass highLight"

Javascript

  1. $('.jqTest1 .execute').click(function(){
  2.     var str = '';
  3.     $('.jqTest1 li').toggleClass('highLight').each(function(){
  4.         str += $(this).attr('class') + '<br />';
  5.     });
  6.     $('.jqTest1 .screen').html(str);
  7. });

HTML

  1. <div class="jqTest1">
  2.     <input type="button" value="execute" class="execute btn btn-execute" />
  3.     <ul>
  4.     <li>設定なし</li>
  5.     <li class="highLight">class="highLight"</li>
  6.     <li class="firstClass highLight">class="firstClass highLight"</li>
  7.     </ul>
  8.     <hr />
  9.     <div class="screen">
  10.     </div>
  11. </div>

CSS

  1. .jqTest1 li.highLight {
  2.         font-weight: bold;
  3.         color: #FFFFFF;
  4.         background: #990000;
  5.     }

.toggleClass( className, switch )

引数

(string)className
追加、削除するクラス名。スペースで区切りで複数設定可能
(boolean)switch
trueの場合追加、falseの場合削除

.toggleClass( [switch] )

.toggleClass( function(index, class, switch) [, switch] )