jQueryでurlのパラメーターを取得して条件分岐

例えばカラーバリエーションの提案時など、何かしらの条件でhtmlページの表示内容を変えたい時に使えます。

ページのurlの後ろに特定のパラメーター(http://www.xxx.com/?=ver1 や http://www.xxx.com/#tabname3などなど)を付与することで、簡単な条件分岐が作れます。

urlのパラメーターを取得する

パラメータを使った条件分岐

下記のサンプルの場合、http://www.xxx.com/?=ver1と、http://www.xxx.com/?=ver2で条件分岐できます。addClass/removeClassなどと組合わせる事で表示させるコンテンツを操作できます。

<script>
$(function() {
if ("?=ver1" == location.search) {
alert("バージョン1です。");
}else if ("?=ver2" == location.search) {
alert("バージョン2です。");
} else {
//パラメーター無し
}
});
</script>

ハッシュを使った条件分岐

ハッシュを使う場合はこちら。location.hashを使います。(http://www.xxx.com/#ver1と、http://www.xxx.com/#ver2で条件分岐できます。)

<script>
$(function() {
if ("#ver1" == location.hash) {
alert("バージョン1です。");
}else if ("#ver2" == location.hash) {
alert("バージョン2です。");
} else {
//パラメーター無し
}
});
</script>

有限会社インセンス 神保部長

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

コメントする