jQueryによるスマホタップ対応
Webサイトのスマホ対応にはタップへの対応が欠かせません。
タップ時に反応が返ってくることで、ページがインタラクティブになります。
PC用サイトではCSSの:hoverで対応できますが、スマホではこの:hoverが理想通りに動作しません。
Javascriptによる対応が不可欠です。
今回は、そのためのjQueryコードを掲載します。
必要なjQueryはこれだけ
追加で必要なjQueyコードはこれだけです。
$(function(){
$( '.tap')
.bind('touchstart', function(){
$(this).addClass('ontap');
}).bind('touchend', function(){
$(this).removeClass('ontap');
});
});
html内のタップイベントを捕まえたい要素のクラスにtapというクラスを追加します。
スマホでそのページを開き、その要素にタップしたときに、ontapという要素が追加され、タップが終わったときにontapクラスが削除されます。
CSSには、:hoverを指定したところに、.ontapクラスのCSSを指定すればOKです。
<div class="tap">block
``````CSS
div:hover,
div.ontap {
\tbackground: black;
}
コメント