切り替えタブのタブを切り替え後スクロールするとタブが元に戻ってしまう

実現したいこと

切り替えタブの正しい表示

発生している問題・分からないこと

切り替えはきちんと行われるのですが、内容をみようとスクロールすると最初のタブに戻ってしまいます。
phpコード（WordPress）のタブ内の内容については、文字数制限の関係上2つ目までを記述しております。
3つ目以降も2つ目と同様の形式で、タームで内容の切り替えを行っています。

該当のソースコード

php
1
2 <div class ="works-tab">
3<div class ="tab-name-list">
4    <ul>
5        <li id ="tab1-1" class ="tab-name active">タブ1</li>
6        <li id ="tab1-2" class ="tab-name">タブ2</li>
7        <li id ="tab1-3" class ="tab-name">タブ3</li>
8        <li id ="tab1-4" class ="tab-name">タブ4</li>
9        <li id ="tab1-5" class ="tab-name">タブ5</li>
10        <li id ="tab1-6" class ="tab-name">タブ6</li>
11    </ul>
12</div>
13
14<div class ="tab-section active">
15<div class ="tab-content">
16
17<?php
18    $works_all = array(
19    'post_type' => 'works',
20    'posts_per_page' => -1,
21    );
22    $works_post = new WP_Query($works_all);
23?>
24<?php
25    if ($works_post -> have_posts()):
26    while ($works_post -> have_posts()):
27    $works_post -> the_post();
28?>
29<div class ="works-content">
30    <a href ="<?php the_permalink(); ?>">
31        <?php
32            $thumbnail = SCF::get('thumbnail-img');
33            $img_data = wp_get_attachment_image_src($thumbnail, 'full');
34            $url = $img_data[0];
35            $alt = get_post_meta($thumbnail, '_wp_attachment_image_alt', true);
36            echo '<img src="' . esc_url($url) . '" alt="' . esc_attr($alt) . '">';
37        ?>                                             
38    <p><?php echo SCF::get('title'); ?></p>
39    </a>
40</div>
41    <?php endwhile; ?>
42    <?php endif; ?>
43</div>
44</div>
45
46    <div class ="tab-section">
47    <div class ="tab-content">
48        <?php
49            $works_cat1 = array(
50            'post_type' => 'works',
51            'posts_per_page' => -1,
52            'taxonomy' => 'works_cat',
53            'term' => 'works_cat1',
54            );
55            $cat1 = new WP_Query($works_cat1);
56        ?>
57        <?php
58            if ($cat1 -> have_posts()):
59            while ($cat1 -> have_posts()):
60            $cat1 -> the_post();
61        ?>
62        <?php endwhile; ?>
63        <?php endif; ?>
64</div>
65</div>
66
67</div>
68</div>

css
1.works h5{
2    color: white;
3    font-size:1.3vw;
4    text-align: center;
5}
6
7.tab-name-list ul{
8    display: flex;
9    
10}
11.tab-name-list li{
12    list-style: none;
13    color: white;
14    font-size:1.1vw;
15    margin-top:3.91vw;
16    cursor: pointer;
17}
18.tab-name-list li::after{
19    content:"/";
20    font-size:1.1vw;
21    margin:0 .5vw;
22}
23.tab-name-list li:nth-child(6)::after{
24    content:"";
25}
26
27.tab-name.active{
28    text-decoration: underline;
29}
30
31
32.tab-section{
33    display: none;
34}
35.tab-section.active{
36    display: block;
37}
38
39
40.works-tab{
41    width:70.42vw;
42    margin:0 auto;
43}
44
45
46.tab-content{
47    margin:3.65vw auto;
48    display: flex;
49    flex-wrap: wrap;
50    justify-content: space-between;
51}
52
53.works-content:nth-child(n+3){
54    margin-top:5.21vw;
55}
56.works-content a{
57    text-decoration: none;
58    color:white;
59}
60.works-content img{
61    width:33.44vw;
62    height:19.38vw;
63    object-fit: cover;
64    object-position: center;
65}
66.works-content p{
67    margin-top:1.56vw;
68    font-size:1.1vw;
69}
70
71
72.page-number{
73    width:2.81vw;
74    height:3.39vw;
75    background-color: white;
76    margin:5vw auto 0vw auto;
77}
78.page-number p{
79    font-size:1.1vw;
80    line-height: 3.39vw;
81    text-align: center;
82}
83
84

jquery
1$(function(){
2
3    //ハンバーガーメニュー
4    $('.hamburger').on('click',function(){
5        $('.hamburger,.nav-bg,body,h1 img,.contact-form').toggleClass('open');
6    });
7    $('.nav-bg a').click(function(){
8        $('.hamburger,.nav-bg,body,h1 img,.contact-form').removeClass('open');
9    });
10
11
12    //ページトップへ戻る
13    const pagetop = $('.page-top');
14    pagetop.hide();
15    $(window).scroll(function() {
16        if($(this).scrollTop() > 800){
17            pagetop.fadeIn();
18        }else{
19            pagetop.fadeOut();
20        }
21    });
22    pagetop.click(function() {
23        $('body,html').animate({ scrollTop: 0}, 800);
24        return false;
25    });
26
27    //fixedパララックス
28    var image = document.getElementsByClassName('thumbnail');
29    new simpleParallax(image, {
30	scale: 1.3
31    });
32
33
34    //スライダー
35    const mySwiper = new Swiper('.swiper', {
36    // Optional parameters
37    loop: true,
38    breakpoints: {
39        599: {
40          slidesPerView: 3,
41          slidesPerGroup : 1,
42        }
43    },
44    slidesPerView : 1,
45    slidesPerGroup : 1,
46
47
48    // If we need pagination
49    pagination: {
50        el: '.swiper-pagination',
51    },
52
53    // Navigation arrows
54    navigation: {
55        nextEl: '.swiper-button-next',
56        prevEl: '.swiper-button-prev',
57    },
58
59    });
60
61
62
63
64
65    //背景色が伸びて出現
66    function BgFadeAnime(){
67
68      // 背景色が伸びて出現（右から左）
69    $('.bgRLextendTrigger').each(function(){ //bgRLextendTriggerというクラス名が
70      var elemPos = $(this).offset().top+200;//要素より、50px上の
71      var scroll = $(window).scrollTop();
72      var windowHeight = $(window).height();
73      if (scroll >= elemPos - windowHeight){
74        $(this).addClass('bgRLextend');// 画面内に入ったらbgRLextendというクラス名を追記
75      }
76    });
77     // 文字列を囲う子要素
78    $('.bgappearTrigger').each(function(){ //bgappearTriggerというクラス名が
79      var elemPos = $(this).offset().top-50;//要素より、50px上の
80      var scroll = $(window).scrollTop();
81      var windowHeight = $(window).height();
82      if (scroll >= elemPos - windowHeight){
83        $(this).addClass('bgappear');// 画面内に入ったらbgappearというクラス名を追記
84      }
85    });   
86    }
87  
88
89
90
91    // フェードイン
92      $(window).scroll(function(){
93        $('.fadein,.fadein-left,.fadein-right,.fadein-top,.fade').each(function(){
94          const elemPos = $(this).offset().top;
95          const scroll = $(window).scrollTop();
96          const windowHeight = $(window).height();
97          if(scroll > elemPos - windowHeight){
98            $(this).addClass('scroll-in');
99          }
100      });
101
102    // フェードイン（順番に）
103    $(window).scroll(function(){
104      $('.fadein-order').each(function(){
105          const elemPos = $(this).offset().top-50;
106          const scroll = $(window).scrollTop();
107          const windowHeight = $(window).height();
108          if (scroll > elemPos - windowHeight){
109              $(function(){
110                  $('.fadein-order').each(function(i){
111                      $(this).delay(i * 200).queue(function(next){
112                          $(this).addClass('scroll-in');
113                          next();
114                      });
115                  });
116              });
117          }
118      });
119  });
120
121
122
123  //左から右へ徐々に表示
124  const images = document.querySelectorAll('.img-wrap');
125  const animationClassName = 'img-animation';
126
127  const observer = new IntersectionObserver((entries) => {
128    entries.forEach((entry) => {
129      if (entry.isIntersecting) {
130        entry.target.classList.add(animationClassName);
131        observer.unobserve(entry.target);
132      }
133    });
134  });
135
136  images.forEach((image) => {
137    observer.observe(image);
138  });
139
140
141      //切り替えタブ
142      $(function() {
143        $('.tab-name').on('click', function() {
144          $('.tab-name, .tab-section').removeClass('active');
145        
146          $(this).addClass('active');
147           
148          var index = $('.tab-name').index(this);
149          $('.tab-section').eq(index).addClass('active');
150        });
151      });
152
153      $(function() {
154        var hash = location.hash;
155        hash = (hash.match(/^#tab1-\d+$/) || [])[0];
156
157        if ($(hash).length){
158          var tabname = hash.slice(1);
159        }else{
160          var tabname = "tab1-1";
161        }
162
163        $(".tab-name , .tab-section").removeClass("active");
164
165        var tabno = $(".tab-name-list li#" + tabname).index();
166
167        $(".tab-name-list li").eq(tabno).addClass("active");
168        $(".tab-section").eq(tabno).addClass("active");
169      })
170      
171});
172
173});
174

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

スクロールアニメーションを実装しているのでそれが影響しているのかなと思うのですが、自分ではよくわからないためご教授いただけますと幸いです。

m.ts10806

2024/03/06 06:24

「タブ切り替え」は該当のページのどこにあたるのでしょうか。いずれにしても質問本文にHTML、cssも提示されたほうが良いと思います。あと同名の同所在地にある企業と同じに思いますが、どういう関係でしょうか？（公開して問題が起きないかを懸念しています）

azejun0127

2024/03/06 07:12

コメントありがとうございます。一度サイトの方は削除させていただき、phpコードとcssコードを追加させていただきましたのでご確認お願いいたします！

m.ts10806

2024/03/06 07:34

PHPというかWordPressですね。そちらはそちらで別の分野なので、質問タグにも追加しておいてもらえると助かります。 ※ただ、PHPやWordPress関係なく、静的HTMLで動作するかは確認してもらいたいかもです

azejun0127

2024/03/06 07:53 編集

説明不足で申し訳ないです。タグの方追加しておきます！静的HTMLで試してみると、やはり同じく元のタブに戻ってしまうのですが静的HTMLの場合、最後のタブがデフォルトで開いている状態でそこに戻るようになってしまいます。。。 ※HTMLで最初のタブにactiveをつけていますが反映されず何故か最後についてしまっています。

azejun0127

2024/03/06 08:02

下記コードがHTMLのコードになります！タブ内容について少し変更しております。 <div class ="works-tab"> <div class ="tab-name-list"> <ul> <li class ="tab-name active">タブ1</li> <li class ="tab-name">タブ2</li> <li class ="tab-name">タブ3</li> <li class ="tab-name">タブ4</li> <li class ="tab-name">タブ5</li> <li class ="tab-name">タブ6</li> </ul> </div> <div class ="tab-section active"> <div class ="tab-content"> <div class ="works-content"> <p>タブ1の内容</p> </div> </div> </div> <div class ="tab-section active"> <div class ="tab-content"> <div class ="works-content"> <p>タブ2の内容</p> </div> </div> </div> <div class ="tab-section active"> <div class ="tab-content"> <div class ="works-content"> <p>タブ3の内容</p> </div> </div> </div> <div class ="tab-section active"> <div class ="tab-content"> <div class ="works-content"> <p>タブ4の内容</p> </div> </div> </div> <div class ="tab-section active"> <div class ="tab-content"> <div class ="works-content"> <p>タブ5の内容</p> </div> </div> </div> <div class ="tab-section active"> <div class ="tab-content"> <div class ="works-content"> <p>タブ6の内容</p> </div> </div> </div> </div>

m.ts10806

2024/03/06 08:18

ちょっと完全に分かったわけではないので回答にはできないのですが > var tabno = $(".tab-name-list li#" + tabname).index(); ここでtabnoに-1が返ってるのが気になります。ただ・・・tab1-X というIDはHTML上にないので、そこが原因かなぁと。。ぼんやり思ったり

azejun0127

2024/03/06 08:26

今一度HTMLの方を確認しましたら、タブ部分のid設定が抜けておりました。正しくは、 <ul> <li id = "tab1-1" class ="tab-name active">タブ1</li> <li id = "tab1-2" class ="tab-name">タブ2</li> <li id = "tab1-3" class ="tab-name">タブ3</li> <li id = "tab1-4" class ="tab-name">タブ4</li> <li id = "tab1-5" class ="tab-name">タブ5</li> <li id = "tab1-6" class ="tab-name">タブ6</li> </ul> ただ、スクロールアニメーションを最後に実装したのですが、スクロールアニメーションを実装する前には問題なく動いていたので、スクロールアニメーションの書き方で何かしら影響を与えているのかなと思うのですがどうなんでしょう、、、。

行動規範の内容に同意します

回答1件

ベストアンサー

たぶん、かっこの閉じ忘れが原因です。スクロールイベントと関係のない処理が巻き込まれていると思います。
適切な場所で閉じるようにしてみてください。

js
1// フェードイン
2$(window).scroll(function () {
3
4// 中略
5
6    $(function () {
7        var hash = location.hash;
8        hash = (hash.match(/^#tab1-\d+$/) || [])[0];
9
10        if ($(hash).length) {
11            var tabname = hash.slice(1);
12        } else {
13            var tabname = "tab1-1";
14        }
15
16        $(".tab-name , .tab-section").removeClass("active"); // スクロールするとここでタブを戻される。
17
18        var tabno = $(".tab-name-list li#" + tabname).index();
19
20        $(".tab-name-list li").eq(tabno).addClass("active");
21        $(".tab-section").eq(tabno).addClass("active");
22    })
23
24});
25
26// ↑ここまでがスクロールイベントのハンドラになってしまっている。