URLのパラメータやアンカー（#以降の部分）を取得して、その値ごとに処理を変更する方法をまとめました。
URLのパラメータで判断する場合
パラメータは、「?」+「変数(パラメータ)＝値」というかたちで構成されています。
※パラメータは1つとは限らず、複数ある場合は「&」でつないでいきます。
まずlocation.searchを利用して「?」で始まるパラメータ部分を取得します。（substring(1)とすることで2文字目以降［?以外］を取得します）
もしURLにパラメータが存在すれば、さらに「&」で分割した後に、連想配列のkeyとvalueにそれぞれパラメータのkeyとvalueを格納します。
処理を変更するにはif文で条件を指定するだけです。
【パラメータに「id=osaka」が含まれるかどうかを調べる場合】
// URLのパラメータを取得
var urlParam = location.search.substring(1);
// URLにパラメータが存在する場合
if(urlParam) {
// 「&」が含まれている場合は「&」で分割
var param = urlParam.split('&');
// パラメータを格納する用の配列を用意
var paramArray = [];
// 用意した配列にパラメータを格納
for (i = 0; i < param.length; i++) {
var paramItem = param[i].split('=');
paramArray[paramItem[0]] = paramItem[1];
}
// パラメータidがosakaかどうかを判断する
if (paramArray.id == 'osaka') {
$('.pram').append('<p>大阪です</p>');
} else {
$('.pram').append('<p>大阪ではありません</p>');
}
}
URLのアンカーで判断する場合
アンカーの取得は簡単で、location.hashを利用して#以降の部分を取得します。
// URLのアンカー（#以降の部分）を取得
var urlHash = location.hash;
// URLにアンカーが存在する場合
if(urlHash){
// アンカーが#osakaかどうかを判断する
if (urlHash == '#osaka') {
$('.hash').append('<p>大阪です</p>');
} else {
$('.hash').append('<p>大阪ではありません</p>');
}
}
実装例
最後に上記の処理を活用した例をご紹介したいと思います。
jQueryを利用してタブ切り替えを実装します。
URLを判断してデフォルトで開いているタブ（アクティブなタブ）を変更してみたいと思います。
下記のリンクをクリックしてみてください。（クリックするとデモページにとびます）
● パラメータで判断
● #以降のアンカー名で判断
上記のスクリプトにこのようなスクリプトを追加してみました。
$(window).load(function() {
// URLにパラメータが存在する場合
if(urlParam) {
// タブの<a>タグのhref属性の値にパラメータidの値と同じ値が含まれている要素を選択
var targetTabParam = $('.tab-list li a[href$="#' + paramArray.id + '"]');
if(targetTabParam.length > 0){
// HTML側でデフォルトで設定している'active'というクラスを削除する
$('.tab-list li a').removeClass('active');
// <a>タグのhref属性の値とパラメータidが同じだった場合、そのタブの<a>タグに'active'というクラスを付与する
targetTabParam.addClass('active');
}
}
// URLにアンカーが存在する場合
if(urlHash){
// タブの<a>タグのhref属性の値にアンカーの値と同じ値が含まれている要素を選択
var targetTabHash = $('.tab-list li a[href$="' + urlHash + '"]');
if(targetTabHash.length > 0){
// HTML側でデフォルトで設定している'active'というクラスを削除する
$('.tab-list li a').removeClass('active');
// <a>タグのhref属性の値とアンカーが同じだった場合、そのタブの<a>タグに'active'というクラスを付与する
targetTabHash.addClass('active');
}
}
// タブ切り替えを実行
$('.tab-body li:not('+$('.tab-list li a.active').attr('href')+')').hide();
$('.tab-list li a').click(function(){
$('.tab-list li a').removeClass('active');
$(this).addClass('active');
$('.tab-body li').hide();
$($(this).attr('href')).fadeIn();
return false;
});
});
他にもパラメータやアンカーを判断して、画像を切り替えたり、背景色を変えたり、いろいろな表示の出し分けに活用できると思います。