質問: $('.tab__item#' + tabname).index(); $('.tab__content').eq(tabno).fadeIn(); $('.tab__item').eq(tabno).addClass('active'); ``` ### 発生している問題・エラーメッセージ 現時点で、デベロッパーツールのconsoleを確認してもエラーは確認できませんでしたが tab-3のみ、他のページから飛んできた際に機能しています。 何も指定していない場合はtab-1がactiveになっています。
回答: 修正箇所 まず、こうすれば取りあえず動くはずの修正案をお伝えします。 ### html #### sabanomisoniさんのコード ``` タブ1 タブ2 タブ3 ``` #### 修正コード(classを付与) ``` タブ1 タブ2 タブ3 ``` ### Javascript #### sabanomisoniさんのコード ``` var tabno = $('.tab__item#' + tabname).index(); ``` #### 修正コード(jQuery.index()の適正な使用) ``` var tabno = $('.tab__item').index($(`.tab__item.${tabname}`)); ``` 解説 sabanomisoniさんのコードで動かない原因は主に2つ挙げられると思います。 * jQueryに渡しているセレクタが誤っている * `jQuery.index()`メソッドを正しく使えていない セレクタに関しては、`$('.tab__item#' + tabname)`の部分になります。 リスト部分の要素を指しているのだと思いますが、`li`直下の`a`に付与されている`#`は`id`ではなく単に`href`属性に渡している値なので、記載のセレクタではヒットしません。 また、仮に`a`に`id=tab-1`のように付与していたとしても、`$('.tab__item #' + tabname)`のように、`.tab-item`と`#tab-1`の間に半角スペースを1つ開けておく必要があります。 また、`jQuery.index()`メソッドを正しく使えていないようです。 これは本来下記のように用います。 `$('複数の要素を指すセレクタ').index('←のうち、index番号を取得したい特定のセレクタ')` sabanomisoniさんのコードで見ると、下記のように使ってしまっているように見えます。 `$('index番号を取得したい特定のセレクタ').index()` 上記を踏まえて、お伝えしている修正後のコードでは`jQuery.index()`を本来の用法通りに使った上で、`index()`にわたす引数に`li`それぞれのユニークなセレクタを渡すためにタブ番号を表す`class`をそれぞれ付与しています。 なにか不明な点や私の方で勘違いしている点などあればお伝え下さい。 以上ご確認をよろしくおねがいします!