2017/8/4更新

jQueryでページ遷移をする方法とサンプル

JavaScriptでは、ページ遷移・リダイレクトするためのメソッドとして、 window.location.hrefが用意されており、jQueryでもこのメソッドを使うことでページ遷移・リダイレクトができます。

今回は、jQueryを使ったさまざまなパターンのページ遷移をサンプルを交えながら説明します。

JavaScriptでページ遷移

JavaScriptでページ遷移をするには、window.locationオブジェクトを使います。

UX MILKに遷移する場合は、以下のようになります。

window.location.href = "http://uxmilk.jp";

1	window.location.href = "http://uxmilk.jp";

また、相対パスを使うこともできます。同じドメインのトップページに遷移したい場合は、以下のようになります。

window.location.href = "/";

1	window.location.href = "/";

参照：絶対パスと相対パスの違い

jQueryを使ったページ遷移のサンプル

ページ読み込みから3秒後にページ遷移

jQueryの $(window).load();と、setTimeout()を組み合わせて、ページ読み込みから3秒後にトップページに遷移する処理です。

setTimeout()は、ミリ秒（1,000分の1秒）で指定した時間が経過後に処理を実行します。

$(window).load(function() {
  setTimeout(function(){
    window.location.href = '/';
  }, 3000);
});

$(window).load(function() {

setTimeout(function(){

window.location.href = '/';

}, 3000);

});

ボタンクリック時にページ遷移

ボタンがクリックされた時に、ページ遷移する処理です。ページ遷移前に処理を入れたい場合に使えます。

以下はボタンがクリックされると、確認ダイアログが表示され「OK」であればページ遷移するという例です。

$("#button").click(function() {
  if (confirm('ページ遷移しますか？')) {
    window.location.href = '/';
  }
});

$("#button").click(function() {

if (confirm('ページ遷移しますか？')) {

window.location.href = '/';

}

});

プルダウンメニュー変更時に遷移

selectタグで作ったプルダウンメニューを選択した時に、ページ遷移するものです。

optionタグのvalue属性に遷移先のURLを指定します。

<select>
  <option value="">ページを選んでください</option>
  <option value="/">トップページ</option>
  <option value="/category/design">デザイン</option>
  <option value="/category/programming">プログラミング</option>
  <option value="/category/marketing">マーケティング</option>
</select>

<option value="">ページを選んでください</option>

<option value="/">トップページ</option>

<option value="/category/programming">プログラミング</option>

<option value="/category/marketing">マーケティング</option>

</select>

selectタグの選択肢が変更された時、もしvalue属性が空文字でなければ指定のURLに遷移します。

$('select').change(function() {
  if ($(this).val() != '') {
    window.location.href = $(this).val();
  }
});

$('select').change(function() {

if ($(this).val() != '') {

window.location.href = $(this).val();

}

});

このように、JavaScriptだけでもページ遷移は実装できますが、jQueryを使うとより手軽にカスタマイズをすることができます。

jQuery