Webページの制作をaspxでしております。
※htmlは使用不可になっています。
現在あるページの見た目を極力変えずに動作のみ変更したいと思います。
変更したい内容は以下の通りです。
前提:テーブルの中にいくつかの項目があり、内容がないものに対しては未作成のため工事中というリンク先に遷移するようにしている(htmlでデフォルトになっている文字色が青で下線が出ている状況)
理想:下線が表示されて文字色も青になっているが、その文字をクリックしても何も反応しない(未作成のためお問い合わせください。のようなメッセージボックスが出ればさらに良い)
上記のことはJavaScriptで実現可能でしょうか?
可能であればどのようにコーディングすれば良いかご教示ください。
alertで良ければ。
<a href="http://www.google.co.jp" onClick="alert('未作成です');return false;">リンク</>
例えば、こんなふうに書けます。
window.addEventListener("DOMContentLoaded", ev => { document.querySelectorAll('a[href*="under_construction"]').forEach(a => { a.addEventListener("click", ev => { alert("未作成のため、お問い合わせください"); ev.preventDefault(); }); }); });
ページの読み込みが完了したときに、リンク先の URL に "under_construction" が含まれているリンクのタグに、クリックしたときのデフォルトの動作(その URL に移動する)を無効にします。
ただ、リンクのタグに別の javascript が結びついている場合、その処理が動いてしまいます。
例えば、クリックしたときに何かしらの処理をしてから、javascript でページを移動するようにしている場合には、ページが移動してしまいます。
それも無効にしたい場合には、もうひと手間かけて、以下のようなコードにします。
window.addEventListener("DOMContentLoaded", ev => { document.querySelectorAll('a[href*="under_construction"]').forEach(a => { const inner = document.createElement("span"); inner.innerHTML = a.innerHTML; a.innerHTML = ""; a.appendChild(inner); inner.addEventListener("click", ev => { alert("未作成のため、お問い合わせください"); ev.stopPropagation(); ev.preventDefault(); }); }); });
ちなみに、メッセージを出さなくても良いのであれば、CSS だけでも実現できます。
a[href*="under_construction"] { pointer-events: none; }
リンク先の URL に "under_construction" が含まれているリンクのタグが、クリックされてもクリックがなかったことにしてしまうスタイルです。
タグが使えないので上のが出来ない可能性はありますが、
2018/04/17 17:23:37clickイベントに対してfalseで返せば遷移はキャンセルと思います。