- ベストアンサー
a href=tel → PCで表示させない方法
スマホユーザーのことを考えて、a href=telを使い、電話番号をクリックすると自動的に電話ができるようにしました。 しかし、パソコン（ＩＥやサファリ、firefox)からクリックすると、このページはありませんという不細工な格好になってしまします。 a href=telをパソコンでは機能しないようにすることは可能でしょうか？ 他のサイトで、CSSを使い、display:noneにすれば、パソコンでは表示されなくなるという説明がありました。しかし、ブラウザの表示がくずれてしまいました。 何か良い方法がありましたら、教えて下さい。
- CSS
- 回答数4
- ありがとう数6
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
私ならjsで、PCのときは電話番号（テキストだけ）表示、スマホのときはa href=telにします。 ヘッダに <script type='text/javascript'> function smtel(telno){ if((navigator.userAgent.indexOf('iPhone') > 0 ) || navigator.userAgent.indexOf('Android') > 0 ){ document.write('<a href="tel:'+telno+'">'+telno+'</a>'); }else{ document.write(telno); } } </script> 番号を記述したいところに <script type="text/javascript">smtel('***-****-****');</script> '***-****-****＝電話番号
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞display:noneにすれば・・・【中略】・・・ブラウザの表示がくずれてしまいました。 そりゃ他の部分のスタイルシートガおかしい。 そもそもユーザーエージェントか、mediaqueryでスタイルシートを切り替えているなら、崩れる部分も書き直せばよい。 ポカッと穴が開いてよければ a[href="tel:********"]{visibility:hidden;} ***内にはHTMlのソースそのまま。 あるいは、<a href="tel:***" title="電話">なら a[title="電話"]{visibility:hidden;}
お礼
ありがおとうございます！ もう一度、他の部分のスタイルシートを確認してみます。 スマホ対応は大変です・・・
- b0a0a
- ベストアンサー率49% (156/313)
display:none の代わりに visibility:hidden はどうですか
お礼
ありがおとうございます！ やってみます！
- basil
- ベストアンサー率35% (148/420)
実現する方法は幾つかあるんですが、説明が厄介なので、うまくやってるサイトのソースを紐解いて真似するのが近道かもしれません。 クライアント側だけで実装するなら、ブラウザ環境をuseragentなどを手がかりにJavascriptなどで振り分けて、個別のCSSを反映させる、とかが一般的かもしれません。
お礼
ありがとうございます！ 他のサイトも見て見ます！！
関連するQ&A
- CSSを利用して、特定のリンクや画像を非表示にしようと思っています。
CSSを利用して、特定のリンクや画像を非表示にしようと思っています。 img[src="画像URL"] {display:none !important;} a[href^="URL"]{display:none !important;} これで、Opera、Firefox、Safariではできたのですが、 IE6ではできません。 IE6で有効な方法を教えてください。
- ベストアンサー
- ブラウザ
- displayがブラウザによって正しく表示されない
phpおよびhtmlに関する質問です。 今、tableを表示・非表示を表示ボタンと非表示ボタンを押すことで自由に開閉しようとしています。 document.getElementById('ｘｘｘ').style.displayを使って書いているのですが、 ChomeやSafariでは正しくボタンを押すと開閉されるのですが、それ以外のブラウザIE、Firefox、Operaでは真っ白な画面が表示されるだけで上手く表示されません。 実際には以下の様に書いています。 <a href="javascript:document.getElementById('ｘｘｘｘ').style.display = ''"> <img src="aaaa.jpg" alt="表示する"/> </a> <a href="javascript:document.getElementById('ｘｘｘｘ').style.display = 'none'"> <img src="bbbb.jpg" alt="表示しない"/> </a> 表示されるブラウザと表示されないブラウザの違いの一つとしてアドレスバー にて、表示される方は同じアドレスが出ている状態でtableが表示されます。 表示されない方は、アドレスバーに「javascript:document.getElementById('ｘｘｘｘ').style.display = ''」 とそのままaタグの内容が表示されてしまいます。 また、この記述がされるページは読み込み時にjavascriptですべてのtableをnoneで表示しない設定 にしており、これについてはすべてのブラウザがいずれも表示しない状態でページ表示が完了します。 IEやFirefoxでもボタンの開閉が上手くできるようにするにはどのようにしたらよろしいでしょうか？ 現在の各ブラウザのバージョンは以下のとおりです。 Chome：26.0 Safari：5.1.7 IＥ：8.0 Ｆｉｒｅｆｏｘ：19.0.2 Opera：12.15
- ベストアンサー
- PHP
- 隠れた文章をマウスで表示させる方法について教えてください
色々なサイトを調べた結果下のようなソースにたどり着きました。 ソースを記述後、質問内容書きますので最後まで読んでください。 ――――――――――――――――――――――――――――― <P onmouseover="document.all.a.style.display=document.all.a.style.display=='none'?'':'none'">1日目</P> <P id=a style="display:none"> <A href="1-0/00.htm">見る</A> <A href="1-1.htm">スライドショー</A> </P> <P onmouseover="document.all.b.style.display=document.all.b.style.display=='none'?'':'none'">2日目</P> <P id=b style="display:none"> <A href="2-0/00.htm">見る</A> <A href="2-1.htm">スライドショー</A> </P> <P onmouseover="document.all.c.style.display=document.all.c.style.display=='none'?'':'none'">3日目</P> <P id=c style="display:none"> <A href="3-0/00.htm">見る</A> <A href="3-1.htm">スライドショー</A> </P> ――――――――――――――――――――――――――――― 上記のソースで目的としているホームページが出来ているのですが、例えば1日目の上にマウスポインターを持ってきた時には見るとスライドショーと言う文字が表示されます。しかしその状態で2日目にポインターを合わせると、同じく見るとスライドショーと言う文字が表示されますが、1日目の文字も表示されたままです。再び1日目に合わせない限り消えません。 そこで1日目にポインターを合わせて文字を表示させた後、2日目にポインタを合わせると1日目に表示してある文字が消えて2日目の文字が出るようにしたいのです。 説明が下手ですが、1つを表示した状態で2つ目を表示させないようにしたいのです。 大変分かりにくい説明で大変恐縮ですが時間がありません誰でも良いので助けてください。 よろしくお願いします
- ベストアンサー
- HTML
- FireFoxでのブロック表示・非表示制御
DIVタグで囲んだ各ブロックの表示・非表示をJavascriptで動的に制御したく、下記のソースの通りJavascriptで表示の切り替え処理を記述したところ、IE6.0では動作しましたが、FireFox2.0では切り替えリンクをクリックしても無反応の状態となってしまいました。 FireFoxのJavascript互換について経験不足のため原因がつかめず困っております。 FireFoxでも動作可能となるには、どのような記述をすればよろしいでしょうか。もしご存知の方がおられましたら宜しくお願い致します。 *** Javascriptソース ****************** function showArea(areaId){ A.style.display="none"; B.style.display="none"; C.style.display="none"; areaId.style.display="block"; } *** ブロック切り替え用リンク ****************** <a href="javascript:showArea(A)">Ａブロック</a> <a href="javascript:showArea(B)">Ｂブロック</a> <a href="javascript:showArea(C)">Ｃブロック</a> *** 表示用ブロック ****************** <div id="A"> Ａブロックの記述内容 </div> <div id="B"> Ｂブロックの記述内容 </div> <div id="C"> Ｃブロックの記述内容 </div>
- ベストアンサー
- JavaScript
- <a href=…></a>で表示されない。
パソコンやりはじめてちょっとの初心者です。 日記とかにリンクを上の通りやって，この<a href=100q-a.htm>こちら</a> のようにリンクしてるのに，表示されません。 けど，ファイルとして開くとちゃんと文字が移るんですけど…。 これって、100q-a.htmというのがまずいんでしょうか？ できれば２０日までに教えてくださるととても嬉しいです。 よろしくお願いします。
- ベストアンサー
- HTML
- <a href="#z" onclick="">
によって onclickの動作をさせた後 <a name="z"></a>へのジャンプをさせようとしたのですが onclickの動作だけがおこなわれジャンプ動作をしません onclickで非表示の内容を表示させその表示された部分の特定の場所 にジャンプさせたいのです 何かいい方法はあるでしょうか？ よろしくお願いします <a href="#z" onclick="document.getElementById('x').style.display='block';return false"> go to 99 </a> <br/> <br/> <div id="x" style="display:none"> 1<br/> 2<br/> ............. 99<br/> <a name="z"></a> </div>
- ベストアンサー
- JavaScript
- onclickで表示/非表示させている動きに、別ページからリンクさせるには
JavaScript初心者です。 A.htmlを作成し、リンクをクリックするとidとnumberを呼び出すことで、同じhtml内に存在する3つのページが1つだけ表示されるように、cssとJavaScriptで表示/非表示させています。 【JavaScript】 function Page(id, nu){ Num = new Array ('01', '02', '03'); for (i=0; i<3; i++) { if(Num[i] == num){ document.getElementById(id + Num[i]).style.display = "block"; } else { document.getElementById(id + Num[i]).style.display = "none"; } }; } 【CSS】 #test01 {display:block;} #test02 {display:none;} #test03 {display:none;} 【html】 <a href="javascript:void(0);" onclick="Page('test','01')">link1</a> <a href="javascript:void(0);" onclick="Page('test','02')">link2</a> <a href="javascript:void(0);" onclick="Page('test','03')">link3</a> <div id="test01"> ・・・ </div> <div id="test02"> ・・・ </div> <div id="test03"> ・・・ </div> このとき別のhtml(B.html)から、A.htmlのid="test02"が表示された状態にリンクを作成することはできるのでしょうか？ 恐れ入りますがよろしくお願い致します。
- ベストアンサー
- JavaScript
- クリックで表示、非表示するメガメニュー
クリックで表示して再度クリックすると非表示になるメガメニューを作ろうと思ってます。 下記のページを参考にjQueryでマウスオーバーによるメガメニューは作成しました。 http://www.skuare.net/test/jmegadropdown.html ただ、jQueryどころかjavascriptも昔少しやった程度しか知識がありませんので、ソースはほぼ上記のページと同じです。 これをクリックでメニュー表示して、再クリックで非表示にするにはどうしたらよいでしょうか？ 具体的にはマイクロソフトのページの上にあるようなメニューです。 http://www.microsoft.com/ja-jp/default.aspx 自分の今の知識でjavascriptを使って書いたコードは下記のとおりです。 このように書いていけば出来るとは思うのですが、もっと効率よく出来る方法はあるでしょうか？ よろしくお願いします。 function test1() { $("#topnav li .products1 .sub").toggle(); $("#topnav li .sale1 .sub").css("display", "none"); } function test2() { $("#topnav li .products1 .sub").css("display", "none"); $("#topnav li .sale1 .sub").toggle(); } <ul id="topnav"> <li> <a href="#" class="products" onclick="test1()">Products</a> <div class="products1"> <div style="opacity: 0; display: none; width: 600px;" class="sub"> <ul> <li><h2><a href="#">menu1</a></h2></li> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> </ul> <ul> <li><h2><a href="#">menu2</a></h2></li> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> </ul> </div> </div> </li> <li> <a href="#" class="sale" onclick="test2()">Sale</a> <div class="sale1"> <div style="opacity: 0; display: none; width: 450px;" class="sub"> <ul> <li><h2><a href="#">menu</a></h2></li> <li><a href="#">Link - 1</a></li> <li><a href="#">Link - 2</a></li> <li><a href="#">Link - 3</a></li> <li><a href="#">Link - 4</a></li> </ul> </div> </div> </li>
- ベストアンサー
- JavaScript
- 消去したgmailのアカウントを戻したい。
複数のgmailのアカウントをパソコンで使い分けていました。そのうちの2個をスマホで使っていました。１つはスマホの契約時に作成するアカント。他の1つはgoogle+とつながっており、google+で何かクリックしたらしく、最近たくさんのメールが届くようになり、スマホでそのアカウントだけを削除しました。 その後パソコンのすべてのgmailにログインできなくなり。以下の表示がでます。 『 <style> #loading {display:none} </style> <font face=arial>Gmail を標準の HTML 形式で表示するには、JavaScript を有効にする必要があります。このブラウザでは、JavaScript が無効になっているか、サポートされていないようです。標準の HTML 形式のページを使用するには、ブラウザのオプションを変更して JavaScript を有効にし、<a href="">もう一度試してください</a>。 <p>Gmail を JavaScript を使わない簡易 HTML 形式で表示するには、<a href="?ui=html&zy=c">ここ</a>をクリックします。</p></font><p><font face=arial> 携帯電話などの携帯端末で Gmailを表示する場合は、<a href="?ui=mobile&zyp=c">ここ</a>をクリックしてください。 』 確認したらavaScript は有効になっていました。そのあとどうしたらよいかわかりません。 『 ブラウザのオプションを変更して …… 』 などは具体的な細かい操作法を教えていただければありがたいです。パソコンの知識があまりないのでよろしくお願いします。
- ベストアンサー
- その他([技術者向] コンピューター)
- jqueryでhrefの値を取得して代入する方法
jquery 初級者です。 下の様なaタグをクリックした時に、（リンク先に移動し）hrefの値と紐付けされているdivを開きたいのですが、どうしてもうまくいきません。 <a class="btn" href="#contents">開く</a> <div id="contents" style="display:none;"> 開きたいコンテンツ。通常は見えない。 </div> ※実際はこうしたリンク要素がたくさんあるため、hrefの値を取得する形にしたいのです。 どなたか詳しい方宜しくお願い致します。
- 締切済み
- JavaScript
お礼
詳しく教えて頂き、ありがおとうございます！ 参考にさせてもらいます！！