.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>