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>