PC用サイトでは<span class="hoge">～</span>で囲まれた文字にマウスポインタを重ねると
cssで指定した文字色に変わるようにしていた部分を、
スマートフォン等のタッチパネルからはタップすると文字色が変わるようにしたいと思っています。
http://www.evotech.net/blog/2008/12/hover-pseudoclass-for-the-iphone/
↑このページに書かれているjavascriptを使う方法が最も理想に近かったのですが、
これだと<a href="#">～</a>タグでないと機能しませんでした。
(javascript部分1行目の「getElementsByTagName('a');」を
「getElementsByTagName('span');」に変えてみたりもしましたが駄目でした)
上記サイトのjavascriptを、<a>タグではなく<span>タグに適用する方法もしくは
jQueryを使わずにタップで<span class="hoge">～</span>の文字色を変えられる他の方法がありましたら教えて下さい。
No.1
574
104
250pt
<style> .button{color:#aaa;} .click_down{color:#ddd;} </style> : : <script> var clickStart = function(e) { var t = e.target; t.className = "click_down"; } var clickEnd = function(e) { var t = e.target; t.className = "button"; } </script> ： ： <span class="button" ontouchstart="clickStart(event)" ontouchend="clickEnd(event)" ></div>
という感じでclassを書き換えるのが楽だと思います。
No.1
574104
ここでベストアンサー
250pt
<style> .button{color:#aaa;} .click_down{color:#ddd;} </style> : : <script> var clickStart = function(e) { var t = e.target; t.className = "click_down"; } var clickEnd = function(e) { var t = e.target; t.className = "button"; } </script> ： ： <span class="button" ontouchstart="clickStart(event)" ontouchend="clickEnd(event)" ></div>
という感じでclassを書き換えるのが楽だと思います。
ありがとうございます。タッチパネル環境からも動作確認出来ました！
既存の、タップで色を変えたいspanタグに
「ontouchstart="clickStart(event)" ontouchend="clickEnd(event)"」を追加するのが困難な状況なのですが
やはりそれらに適用するのは難しいでしょうか…。
お騒がせしました、上記コメントの既存のspanタグについては自己解決出来ました。
getElementsByClassNameとsetAttributeを使って、
既存のbuttonクラスのspanタグに「ontouchstart="clickStart(event)"」と
「ontouchend="clickEnd(event)"」の2つを追加するようにしたら思い通りに出来ました。
素晴らしいご回答、本当にありがとうございます。
1
1
1
1
2
9
8
ありがとうございます。タッチパネル環境からも動作確認出来ました！
2013/07/23 18:09:56既存の、タップで色を変えたいspanタグに
「ontouchstart="clickStart(event)" ontouchend="clickEnd(event)"」を追加するのが困難な状況なのですが
やはりそれらに適用するのは難しいでしょうか…。
お騒がせしました、上記コメントの既存のspanタグについては自己解決出来ました。
2013/07/24 02:12:06getElementsByClassNameとsetAttributeを使って、
既存のbuttonクラスのspanタグに「ontouchstart="clickStart(event)"」と
「ontouchend="clickEnd(event)"」の2つを追加するようにしたら思い通りに出来ました。
素晴らしいご回答、本当にありがとうございます。