Q&A
＞ジェイクエリでバックブラウザ
なるべくこの手のものは正しく表現したほうがのちのトラブルも少ないですよ。
”jQueryでブラウザバック”です。調整願います。
前提・実現したいこと
ページの戻るボタンを押したときにリンク付きの画像を表示させたいです。
発生している問題・エラーメッセージ
戻るボタンをクリックすると正常に画像(モーダル)が表示されるのですが、リンク付きになっていません。
該当のソースコード
<!doctype html> <html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function(){ history.pushState(null, null, null); //ブラウザバック無効化 //ブラウザバックボタン押下時 $(window).on("popstate", function (event) { history.pushState(null, null, null); $('#ridatu').fadeIn(); }); }); </script> <style type="text/css"> .modal-wrapper { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; display:none; } #ridatu { position: absolute; top: 20%; left: 50%; -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); margin:0; padding:0; } </style> </head> <body> <a src="https://www.google.com"> <div class="modal-wrapper" id="ridatu"> <div class="modal"> <img src="image.jpg"> </div> </div> </a> </body> </html>
試したこと
aタグの位置がおかしいのかと思いimgだけを囲ったり、modal-wrapperだけを囲ってみたり
したのですが、どう試してもリンク付きになりませんでした。
補足情報（FW/ツールのバージョンなど）
javascriptとjqueryはまだは勉強している途中で、ほかの表示のさせ方がわからず、わかる範囲でやってみた感じです。
よろしくお願いします。
回答2件
0
aタグのURLを指定する属性が、srcになっているからです。
正しくはhrefです。
html
1<a href="https://www.google.com"> 2<!-- 省略 --> 3</a>
投稿2019/06/13 00:40
総合スコア9528
0
ベストアンサー
<a src="https://www.google.com">
リンクはhrefです。
リンク付きの画像
リンクをあてたい場所が画像なら画像を囲むほうが良いのでは。
html
1<a href="リンク先"> 2 <img src="画像"> 3</a>
投稿2019/06/13 00:39
編集2019/06/13 00:42総合スコア80850
あなたの回答
tips
プレビュー
