【JavaScript】URLパラメータ値でコンテンツの表示・非表示を切り替える

JavaScriptを使って、URLパラメータ値でコンテンツの表示・非表示を切り替えます。

URLからパラメータを取得する

URLからパラメータを取得します。

  <script>
    $(document).ready(function() {
      // URLからパラメータを取得する関数
      function getParameterByName(name) {
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(window.location.href);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, " "));
      }

      // URLパラメータから値を取得
      var showContentValue = getParameterByName('showcontent');

      // コンテンツの表示・非表示を切り替える
      if (showContentValue === '1') {
        // showContentが1の場合、content1を表示し、content2を非表示にする
        $('#content1').show();
        $('#content2').hide();
      } else {
        // それ以外の場合、content2を表示し、content1を非表示にする
        $('#content2').show();
        $('#content1').hide();
      }
    });
  </script>

この例では、getParameterByName関数でURLからshowContentパラメータの値を取得し、その値に基づいてコンテンツの表示・非表示を切り替えています。content1やcontent2は、実際のコンテンツに置き換えてください。

HTML側のコード

HTML側では、idを使って値を取得、コンテンツの表示・非表示を切り替えます。

<div id="content1">
  <!-- content1のコンテンツをここに追加 -->
  <p>Content 1 を表示します。</p>
</div>

<div id="content2">
  <!-- content2のコンテンツをここに追加 -->
  <p>Content 2 を表示します。</p>
</div>

完成形

スクリプトの完成形です。

  <div id="content1">
  <!-- content1のコンテンツをここに追加 -->
  <p>Content 1 を表示します。</p>
</div>

<div id="content2">
  <!-- content2のコンテンツをここに追加 -->
  <p>Content 2 を表示します。</p>
</div>

<script>
    $(document).ready(function() {
      // URLからパラメータを取得する関数
      function getParameterByName(name) {
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(window.location.href);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, " "));
      }

      // URLパラメータから値を取得
      var showContentValue = getParameterByName('showcontent');

      // コンテンツの表示・非表示を切り替える
      if (showContentValue === '1') {
        // showContentが1の場合、content1を表示し、content2を非表示にする
        $('#content1').show();
        $('#content2').hide();
      } else {
        // それ以外の場合、content2を表示し、content1を非表示にする
        $('#content2').show();
        $('#content1').hide();
      }
    });
  </script>

パラメータshowcontentが1の場合、content1を表示し、content2を非表示にします。それ以外の場合、content2を表示し、content1を非表示にします。

https://eguweb.tech/4663/?showcontent=1

まとめ

このようにして、URLから指定したパラメータの値を取得して、パラメータに応じてページの状態を変化させることができます。