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

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

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

JavaScriptでページ遷移

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

UX MILKのディレクター募集