タブブロックで特定のタブにリンクさせる方法

タブブロックで特定のタブにリンクさせる方法

, ,

タブブロックで特定のタブにリンクさせる方法

タブブロックで特定のタブにリンクさせる方法が無いかと思い、方法を考えてみましたので参考までに。

擬似的に該当箇所をクリック(タップ)したことにする

まずは、URLに決められたIDが指定されていた場合に動作するようにします。

[ Javascript ]

if(location.hash == "#kokoniID") { //ここにIDを入力します
	//ここに動作を入力します。
}

指定されたIDが見つかった場合、該当箇所を擬似的にクリックさせます。

[ Javascript ]

if(location.hash == "#kokoniID") { //ここにIDを入力します
	jQuery("#kokomoiID").trigger("click"); //該当のタブへ切り替えるボタンを擬似的にクリックしたことに
}

念の為、1秒経ってから移動させます。

[ Javascript ]

setTimeout(function() {
	if(location.hash == "#kokoniID") {
			jQuery("#kokomoID").trigger("click&amp");
	}
}, 1000);

最終的なコードの内容

最終的に functions.php に記載する内容は以下の通りです。
今回、使用しているページが会社概要ページのみだったため、「 about 」ページを指定しています。

[ PHP ]

/*-------------------------------------------*/
/* 特定のページのフッターにJSを追加
/*-------------------------------------------*/
function add_js_footer() {
	if ( is_page('about') ) {
		$html = <<<EOF
		<script>
			setTimeout(function() {
				if(location.hash == "#kokoniID") {
					jQuery("#kokomoID").trigger("click");
				}
			}, 1000);
		</script>
		EOF;
		echo $html;
	}
}
add_action( 'wp_footer', 'add_js_footer' );

結構簡単に実装できますので試してみてください!上手く実装できない場合はオンラインでのサポートもお受けしていますのでご相談ください。

自己紹介

松田 大と申しますm(_ _)m
インディーズでミュージシャンをやっていたのですがいつのまにか…

とある企業でショップのアルバイトスタッフから正社員、支店長を経てシステム部門に異動するという、開発担当としては変わった経緯を持っている方だと思います。

「Excel VBA」からスタートして、Yamaha RTX シリーズで VPN環境構築、Hyper-V環境構築、Windowsアプリ開発などを経験した後、「 WordPress 」に出会い、どっぷりハマっています。

現在勤めているETBS合同会社では、「 WordPress 」を活用したWEBサイト、業務用WEBアプリケーション開発を中心に、記事の執筆代行や掲載に必要な情報のリサーチ、映像のテロップ入れや切りはりなどの簡単な動画編集なども、まとめて行なっています。

現在、代表兼二児のパパ。子育てを通じて、こどもたちにもプログラミングの楽しさに触れてほしいと思うようになり、「 こどもICTかつしか教室 」を開講中。最近は童心に帰り、簡単なゲーム制作なんかも楽しんでいます(^_^)。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です