.hasClass,.addClass(),.removeClassで用途色々スイッチ
2016年12月1日 HTML・CSS
トグルではなく、jqueryでclassを加えたり、外したり。
見た目はCSSでやるため用途はいろいろあります。
初歩的ですがシンプルにしました。(自分用に)
Jquery
$(function() { $('.btn').click(function(){ if($('#area').hasClass('bold')){ $('#area').removeClass('bold'); } else { $('#area').addClass('bold'); } }); });
CSS
.bold span{ background: -webkit-linear-gradient(transparent 60%, #ff1493 60%)!important; background: -o-linear-gradient(transparent 60%, #ff1493 60%)!important; background: linear-gradient(transparent 60%, #ff1493 60%)!important; font-weight:bold; }
HTML
<button class="btn">PUSH</button> <section id="area">jqueryの<span>addClass(),removeClass(),hasClass()</span>を使用した切替スイッチ。見た目はCSSで制御するため用途は色々。</section>