web関連

js使ってURLのハッシュタグを取得して、同じid属性を持った要素にクラスを追加する方法

2018/06/25

プログラミング

言語-javascript

トップページに最新の「よくある質問」を抜粋したものを数件用意して、リンク先を「よくある質問」ページ内にアンカーリンクで飛ばした時に、開閉式のQAだったので開かなかったのでjsで開くように調整した時の備忘録

実際に使ったコード

$(function(){
	//　URLにアンカー（#○○）があれば取得
	var urlHash = location.hash;

	//　アンカー（#○○）がある場合
	if(urlHash){
		var thisHash = $('親 > 子').find(urlHash);
		//　親要素の中の子要素にurlHash（#○○）と同じid属性を持った要素がある場合
		if( thisHash ){
			//　同じid属性を持った要素にクラスを付与
			$(urlHash).addClass("open");

		} else {
			//　thisHashが無い時
		}
	}
});

参考

▼JavaScriptでURLのパラメータやアンカーを判断して処理を変更する方法
https://www.tam-tam.co.jp/tipsnote/javascript/post9911.html

パラメーターのアンカーを取得するのにとても参考になりました。

補足

「location.hash」でurlの#タグを含むアンカーを取得
例：https://sample.com/faq/#qa_243
↓
location.hashは「#qa_243」を取得する

#タグを消したいときは「substr()」を使う

// 「qa_243」が取得できる
location.hash.substr(1);

#タグを消す方法は「substr()」か「substring()」が使える

javascriptやjqueryで何が何を取得できるかどうかわかってないからめっちゃ時間かかるわ