【jQuery】URLパラメータ値でコンテンツの表示・非表示を切り替える方法
URLパラメータ値でコンテンツの表示・非表示を切り替えます
目次
URLからパラメータを取得する
この関数は、URLからパラメータを取得します。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<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, " "));
}
}
</script>
name パラメータには取得したいパラメータの名前を指定します。
name の中に含まれる特殊文字「[」および「]」をエスケープします。
正規表現パターンを作成します。パターンは ? または & で始まり、name の後に = が続き、その後にパラメータの値が続くか、& または # または行の末尾 ($) が続くという形式です。
regex.exec(window.location.href) で現在のページのURLに対して正規表現を適用し、パラメータと値の結果を取得します。
もし結果が得られなかった場合は null を返します。
もし値がない場合は空文字列 '' を返します。
パラメータの値がある場合は、decodeURIComponent を使ってURLエンコードを解除し、+ をスペースに置き換えてから返します。
この関数を使うと、例えば以下のようなURLがあった場合に、指定したパラメータの値を取得することができます。
https://example.com/page?name=John&age=25
例えば、name パラメータの値を取得する場合は、以下のように呼び出します。
var nameValue = getParameterByName('name');
console.log(nameValue); // 'John'
コンテンツの表示・非表示を切り替える
パラメータの値を取得して、コンテンツの表示・非表示を切り替えます。
// パラメータの値を取得
var showContent = getParameterByName('show');
// コンテンツの表示・非表示を切り替える
if (showContent === 'true') {
$('.content').show();
} else {
$('.content').hide();
}
});
</script>
<style>
.content {
display: none;
}
</style>
完成形
スクリプトの完成形です。
↓
続きはこちら
サポートお願い致します!