htmlを使ってサイトを作っていると、必ずといっていいほどある、
外部リンク
多くの場合、外部リンクに飛ばす場合は別ウインドウで開く、というのがweb制作の定番ではありますが、例えば、サイト作成の途中でその挙動を変えたくなることがあるかもしれません。
そうした場合、通常のhtmlでリンクを製造しますと
<a href="URL" target="_blank">サイト名</a>
として別ウインドウ開きのリンクは作りますが、この場合、
例えばサイト中に多くのページがあり、大量にリンクがあった場合、書き換えが大変です。
もちろんソース全部に文字列の置換等はかけられますが、その後再度関係ページを全部アップし直しなど、手間がかかることは間違いないです。
そうした時に、全部のリンクの挙動を一括で管理するのに、
例えばjQueryを用いておくと大変便利です。
まずは定番、ヘッダでjQueryを読み込んでおきます。
<head></head>間に
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
の記述をしてGoogle提供のjQueryライブラリを読んでおきます。
その上で、
script表記中か、読み込んでるJSファイル中に
$(function(){
$('.クラス名').click(function(){
window.open(this.href, '_blank');
return false;
});
});
を記載すれば、htmlファイル中で、例えば、
<a href="URL" class="宣言したクラス名">サイト名</a>
と書いたリンクに関しては、この挙動、今回は別ウインドウで開く、
ということになります。
また、もしも挙動を変えたい場合、簡単に一か所書き換えるだけ、
window.open(this.href, '_blank');
の、_blank を、例えば、_self にすれば、
これまで新規ウインドウで開いていたリンクが一斉にそのウインドウ上に、つまり、普通の画面遷移に切り替わります。
システム、サイトが大きくなればなるほど途中で変えるのは大変なものですので、こういった工夫が重要になってきます。
こうちゃん
