【jQuery】他ページからのタブ切り替え

Question

前提・実現したいこと

他のページから該当のタブのリンクに飛んできた際に
該当のタブが切り替わるようにしたいです。
タブ切り替え自体に使用しているのはtabsletになります。
https://vdw.github.io/Tabslet/

JavaScript・jQueryは初心者なため、解決にご助力いただけますと幸いです。

該当のソースコード

【html】
<div class="tab__wrap">
    <div class="tabs tab__container">
        <ul class="horizontal">
            <li class="tab__item"><a href="#tab-1">タブ1</a></li>
            <li class="tab__item"><a href="#tab-2">タブ2</a></li>
            <li class="tab__item"><a href="#tab-3">タブ3</a></li>
        </ul>
        <div class="tab__content" id="tab-1">
            <div class="tab__desc">
                <p class="c-txtsp">テキストテキストテキストテキストテキストテキスト</p>
            </div>
        </div>
        <div class="tab__content" id="tab-2">
            <div class="tab__desc">
                <p class="c-txtsp">テキストテキストテキストテキストテキストテキスト</p>
            </div>
        </div>
        <div class="tab__content" id="tab-3">
            <div class="tab__desc">
                <p class="c-txtsp">テキストテキストテキストテキストテキストテキスト</p>
            </div>
        </div>
    </div>
</div>

試したこと

下記、参考サイト（https://techmemo.biz/javascript/tab-direct-link/）を元に記述しています。

【JavaScript】
var hash = location.hash;
hash = (hash.match(/^#tab-\d+$/) || [])[0];

if($(hash).length){
var tabname = hash.slice(1) ;
} else{
var tabname = "tab-1";
}

$('.tab__content').hide();
$('.tab__item').removeClass('active');

var tabno = $('.tab__item#' + tabname).index();

$('.tab__content').eq(tabno).fadeIn();

$('.tab__item').eq(tabno).addClass('active');

発生している問題・エラーメッセージ

現時点で、デベロッパーツールのconsoleを確認してもエラーは確認できませんでしたが
tab-3のみ、他のページから飛んできた際に機能しています。
何も指定していない場合はtab-1がactiveになっています。

Answer 1

修正箇所

まず、こうすれば取りあえず動くはずの修正案をお伝えします。

html

sabanomisoniさんのコード

<li class="tab__item"><a href="#tab-1">タブ1</a></li>
<li class="tab__item"><a href="#tab-2">タブ2</a></li>
<li class="tab__item"><a href="#tab-3">タブ3</a></li>

修正コード（classを付与）

<li class="tab__item tab-1"><a href="#tab-1">タブ1</a></li>
<li class="tab__item tab-2"><a href="#tab-2">タブ2</a></li>
<li class="tab__item tab-3"><a href="#tab-3">タブ3</a></li>

Javascript

sabanomisoniさんのコード

var tabno = $('.tab__item#' + tabname).index();

修正コード（jQuery.index()の適正な使用）

var tabno = $('.tab__item').index($(`.tab__item.${tabname}`));

解説

sabanomisoniさんのコードで動かない原因は主に２つ挙げられると思います。

• jQueryに渡しているセレクタが誤っている
• jQuery.index()メソッドを正しく使えていない

セレクタに関しては、$('.tab__item#' + tabname)の部分になります。
リスト部分の要素を指しているのだと思いますが、li直下のaに付与されている#はidではなく単にhref属性に渡している値なので、記載のセレクタではヒットしません。
また、仮にaにid=tab-1のように付与していたとしても、$('.tab__item #' + tabname)のように、.tab-itemと#tab-1の間に半角スペースを１つ開けておく必要があります。

また、jQuery.index()メソッドを正しく使えていないようです。
これは本来下記のように用います。
$('複数の要素を指すセレクタ').index('←のうち、index番号を取得したい特定のセレクタ')
sabanomisoniさんのコードで見ると、下記のように使ってしまっているように見えます。
$('index番号を取得したい特定のセレクタ').index()

上記を踏まえて、お伝えしている修正後のコードではjQuery.index()を本来の用法通りに使った上で、index()にわたす引数にliそれぞれのユニークなセレクタを渡すためにタブ番号を表すclassをそれぞれ付与しています。

なにか不明な点や私の方で勘違いしている点などあればお伝え下さい。
以上ご確認をよろしくおねがいします！