電話番号のモバイル切り替え

店舗や企業サイトなど作っているとおおよその場合必要になる機能ですよね。

モバイルだとTELリンク、PCだとリンクがない状態になります。
画像はAltに番号を設定します。
 

html



<p class="tel">00-1234-5678</p>

<p class="tel">
<img src="なんちゃら.png" alt="01-1234-5678">
</p>

Jquery



if (navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)) {
  $(function() {
    $('.tel').each(function() {
      var str = $(this).html();
      if ($(this).children().is('img')) {
        $(this).html($('').attr('href', 'tel:' + $(this).children().attr('alt').replace(/-/g, '')).append(str + ''));
      } else {
        $(this).html($('').attr('href', 'tel:' + $(this).text().replace(/-/g, '')).append(str + ''));
      }
    });
  });
}

コメント

タイトルとURLをコピーしました