iOS・Androidのハイライト表示の指定について。その２
iOS・Androidのハイライト表示の設定について （その２）
以前、スマートフォンのハイライト表示について記事を書きましたが、
→”iOS・Androidのハイライト表示の指定について。”
その中の「ｊｓを使ったハイライト表示の指定」について質門を頂いたので追記させて頂きます。
頂いた質門は
”idではなく、ｃlassのように複数のリンクでもハイライト表示させる方法はあるか”
といった内容でした。
今回その質門を受け、改良しようとした所、
javascriptだけではclassの指定などが面倒でしたので
jQueryを使って改良致しました。
jQueryを使ったiOS・Androidのハイライト表示の指定
まず、cssは前回の
”iOS・Androidのハイライト表示の指定について。”
同様、aタグ又は指定する要素のiOS・Androidのデフォルトのタッチした時のハイライトを消す記述をし、
それとは別に、タッチした時・指を離した時用のclassを用意しておきます。
a{
background-color:transparent;←基本の背景色（好きな色）
-webkit-touch-callout:none;←デフォルトのタッチした時のハイライトを消す
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);←デフォルトのタッチした時のハイライトを消す
}
.touchstyle { background-color:yellow;}←タップ（好きな色）
.notouchstyle { background-color:transparent;}←離す（好きな色）
そして、こちらが今回jQueryを使い改良した箇所。
※今回はjQueryを使うので、ここに記述はしていませんがjQueryもちゃんと読み込んでくださいね！
$(function(){
$('.test_class').bind({
'touchstart': function(e) {
$(this).removeClass("notouchstyle").addClass("touchstyle");
},
'touchend': function(e) {
$(this).removeClass("touchstyle").addClass("notouchstyle");
}
});
});
HTMLは、なんでも。
下のものは例ですが、classなので、このように数を増やしてもいけます。
<a class="test_class" href="#">sprouthead.com</a> <a class="test_class" href="#">sprouthead.com</a> <a class="test_class" href="#">sprouthead.com</a>
以上になります。
今回は画像などは用意していませんが
動きは前回の記事と同じです。
タッチした瞬間ハイライトが付き、指を離した瞬間ハイライトが消えます。
始めっからこちらで書いとけばよかったですね・・。
確かにidしか使えないなんて使い勝手が悪い！
失礼いたしました・・・。
[…] よろしかったら、こちらも合わせて御覧ください。 iOS・Androidのハイライト表示の指定について。その２ […]