別ページからのタブメニューへのリンク

Question

プログラミング等超初心者です。
教えていただけると幸いです。

https://yuntu-tek.com/tab-menu/
こちらのサイトを参考にタブメニューを制作いたしました。
デザイン以外は本当にそのままの作りにしております。

別ページからこのタブメニューがあるページに
「例えばタブ２が開いた状態」でリンクさせたいのですが
どうもうまくいきません。

よろしくお願いいたします！

Comments

[Lhankor_Mhy]

サンプルが二つあると思いますが、どちらで作成したのですか？

[退会済みユーザー]

レスありがとうございます！
1 CSSとjQUERYを使ったタブメニュー　で制作いたしました！

Answer 1

いろいろなやり方があると思いますが、パラメータをつけておけばいいのではないでしょうか。

pageAに「pageBのタブ2が開いた状態」のリンクを貼りたければ、pageAのHTMLをこのようにします。

<a href="http://example.com/pageB/?tab=2">pageBにいってタブ2を開くリンク</a>

そしてpegaBで読むJavaScriptファイルに、上記hrefのパラメータ部分（tab=2）を拾ってそのタブをクリックするという機能（次のjQuery）を実装すればできると思います。

// パラメータ部分（`tab=2`）を拾う
var params = get_params();
var tab = params.tab; // tab に 2 が入る

// tab2 をクリックして開く
$('.tab-item:nth-child('+tab+')').trigger('click');

// パラメータを取得
function get_params(){
	// URLパラメータを"&"で分離する
	var url_search = location.search.substr(1).split('&');
 
	// パラメータ連想配列エリア初期化
	var para = [];
 
	// キーエリア初期化
	var key = null;
 
	for(var i = 0 ; i < url_search.length ; i++)
	{
		// "&"で分離したパラメータを"="で再分離
		key = url_search[i].split("=");
 
		// パラメータを連想配列でセット
		para[key[0]] = key[1];
	}
 
	// 連想配列パラメータを返す
	return (para);
}	

Comments

[退会済みユーザー]

ありがとうございます。
書き方か理解が誤っているのかうまくうごきません・・。

JS
$(function() {
$('.tab-item').click(function() {

//現在activeが付いているクラスからactiveを外す
$('.active').removeClass('active');

//クリックされたタブメニューにactiveクラスを付与。
$(this).addClass('active');

//一旦showクラスを外す
$('.show').removeClass('show');

//クリックしたタブのインデックス番号取得
const index = $(this).index();

//タブのインデックス番号と同じコンテンツにshowクラスをつけて表示する
$('.tab-content').eq(index).addClass('show');

});
});

$(function() {
// パラメータ部分（`tab=2`）を拾う
var params = get_params();
var tab = params.tab; // tab に 2 が入る

// tab2 をクリックして開く
$('.tab-item:nth-child('+tab+')').trigger('click');

// パラメータを取得
function get_params(){
// URLパラメータを"&"で分離する
var url_search = location.search.substr(1).split('&');

// パラメータ連想配列エリア初期化
var para = [];

// キーエリア初期化
var key = null;

for(var i = 0 ; i < url_search.length ; i++)
{
// "&"で分離したパラメータを"="で再分離
key = url_search[i].split("=");

// パラメータを連想配列でセット
para[key[0]] = key[1];
}

// 連想配列パラメータを返す
return (para);
}
});
});

こういうことであっていますか？

[退会済みユーザー]

あ！！！できました！！！ありがとうございます。助かりました！♡！