タブを開いた状態のところへリンクする方法

Question

タブを開いたところへ別のページからリンクさせようとして、j Queryで記述しました。
知識がなく、コピペで行ったため、以下のような現象が起こり困っております。
何かお気づきのことをご教授いただけないでしょうか。

★現象　<リンク元のページ＞のボタン１をクリックすると、リンク先のページの Content-D が開いた状態になる。
※他のボタンは、適切なタブが開いている状態になる。

<リンク元のページ＞

<a href="<?php bloginfo('url'); ?>/individual#tab1">ボタン1</a>
<a href="<?php bloginfo('url'); ?>/individual#tab2">ボタン２</a>
<a href="<?php bloginfo('url'); ?>/individual#tab3">ボタン３</a>
<a href="<?php bloginfo('url'); ?>/individual#tab4">ボタン４</a>

<リンク先のページ>

<ul class="tab-group">
	<li class="tab is-active" id="tab1">Tab-A</li>
	<li class="tab" id="tab2">Tab-B</li>
	<li class="tab" id="tab3">Tab-C</li>
        <li class="tab" id="tab4">Tab-D</li>
</ul>

<!--タブを切り替えて表示するコンテンツ-->
<div class="panel-group">
	<div class="panel is-show">Content-A</div>
	<div class="panel">Content-B</div>
	<div class="panel">Content-C</div>
        <div class="panel">Content-D</div>
</div>

<CSS> ```ここに言語を入力 .tab-group{ display: flex; justify-content: center; } .tab{ flex-grow: 1; padding:5px; list-style:none; border:solid 1px #CCC; text-align:center; cursor:pointer; } .panel-group{ height:100px; border:solid 1px #CCC; border-top:none; background:#eee; } .panel{ display:none; } .tab.is-active{ background:#F00; color:#FFF; transition: all 0.2s ease-out; } .panel.is-show{ display:block; } ``` <jQuery> ```ここに言語を入力 <script> $(function() {

//クリックしたときのファンクションをまとめて指定
$('ul.tab-group li').click(function() {
//.index()を使いクリックされたタブが何番目かを調べ、
// indexという変数に代入します。
var index = $('.tab-group li').index(this);

//コンテンツを一度すべて非表示にし、
$('.panel').css('display','none');

//クリックされたタブと同じ順番のコンテンツを表示します。
$('.panel').eq(index).fadeIn();

//タブについているクラスselectを消し、
$('.tab-group li').removeClass('is-active');

//クリックされたタブのみにクラスselectをつけます。
$(this).addClass('is-active')
});
});

//ダイレクトリンク
$(function() {
//location.hashで#以下を取得 変数hashに格納
var hash = location.hash;
//hashの中に#tab～が存在するか調べる。
hash = (hash.match(/^#tab\d+$/) || [])[0];

//hashに要素が存在する場合、hashで取得した文字列（#tab2,#tab3等）から#より後を取得(tab2,tab3)
if($(hash).length){
var tabname = hash.slice(1) ;
} else{
// 要素が存在しなければtabnameにtab1を代入する
var tabname = "tab1";}
//コンテンツを一度すべて非表示にし、
$('.panel').css('display','none');

//一度タブについているクラスselectを消し、
$('.tab').removeClass('is-active');

var tabno = $('.tab-group li#' + tabname).index();

//クリックされたタブと同じ順番のコンテンツを表示します。
$('.panel ').eq(tabno).fadeIn();

//クリックされたタブのみにクラスselectをつけます。
$('.tab-group li').eq(tabno).addClass('is-active')
});

</script> ```

Comments

[kei344]

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。

Answer 1

タブ切り替えがうまくできているなら.click()でいけそうな気がします。

$('.tab-group li#' + tabname).click();
/*
 //コンテンツを一度すべて非表示にし、
 $('.panel').css('display','none');

 //一度タブについているクラスselectを消し、
 $('.tab').removeClass('is-active');

 var tabno = $('.tab-group li#' + tabname).index();

 //クリックされたタブと同じ順番のコンテンツを表示します。
 $('.panel ').eq(tabno).fadeIn();


 //クリックされたタブのみにクラスselectをつけます。
 $('.tab-group li').eq(tabno).addClass('is-active')
*/

Comments

[yojitom]

ありがとうございます。いけそう！と喜びましたが・・・
ボタン1を押すとContent-Aにリンクしましたが、その他のボタンでもContent-Aにリンクする感じになりました。それと、タブ切り替えはできていたものが、できなくなります。
何かお気づきの点がありましたら、何卒よろしくお願いいたします。

[kei344]

hashとtabnameの値がどうなっているか、確認してみてください。
$(hash).lengthがある時点で$(hash).click();すれば開くとは思います。

[yojitom]

hashとtabnameの値がどうなっているか、確認してみてください。
→individual　のみになりました。
ボタン２をクリックするとindividual/#tab2となっていますが、Tab-Aが選択された状態で、
Content-Aが表示されています。
$(hash).click();すれば開くとは思います。→すみません、知識が薄いもので申し訳ないのですが、先ほどの　”$('.tab-group li#' + tabname).click();”　を　”$(hash).click();”　に置き換えればよろしいのでしょうか？

[kei344]

「individual」と実際に表示されたのでしょうか。「undefined」の間違いでは？
hashがその値でtabnameに値が入るわけが無いので、確認の仕方に問題がある気がします。

console.log(hash,tabname); // これで値を取得します。

【【初心者向け】コンソールによるJavascriptのエラー表示方法】
https://eng-entrance.com/javascript-display-error

[yojitom]

とんちんかんなことをしているかもしれませんが、、、
コンソールにconsole.log(hash,tabname); を入力すると、

Uncaught ReferenceError: hash is not defined
at <anonymous>:1:13
(anonymous) @ VM14419:1

が表示されました。。

[kei344]

$('.tab-group li#' + tabname)の前に入れましたか？

[yojitom]

そうしてみました！

[kei344]

consoleはずしてもエラーは出ませんか？

[kei344]

//ダイレクトリンク
$(function() {
$( location.hash.includes( '#tab' ) ? location.hash : '#tab1' ).click();
// 後全部削除
});

これでどうかな。

[yojitom]

おったまげました。。。
表示されました＾＾
まさか、、こげんに短い記述で解決するとは。
眼から鱗どころか刺身が出てきそう。
ありがとうございます。本当に感謝です。。