jQuery タブ切り替え

前提

初めて投稿させていただきます。
jQueryを使ってニュースセクションのタブの切り替えをしようとしています。
検証ツールで確認したところ、タブ自体の切り替えはできているのですが、
ニュース一覧（class="top-news__list-wrap"）の切り替えができません。
どなたかわかる方がいたら教えていただきたいです。
よろしくお願いします。

実現したいこと

タブを切り替えたらニュース一覧も切り替わるようにしたい

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

特になし

該当のソースコード

html
1<section class="top-news" data-aos="fade-in">
2      <div class="top-news__inner inner">
3        <h2 class="section-title">
4          <span class="section-title__icon"></span>
5          <div class="section-title__text">
6            お知らせ
7          </div>
8        </h2>
9        <ul class="top-news__tab">
10          <li class="top-news__tab-menu js-active">営業情報</li>
11          <li class="top-news__tab-menu">その他</li>
12        </ul>
13
14        <div class="top-news__list-container">
15          <div class="top-news__list-wrap js-show">
16            <ul class="top-news__list">
17              <li class="top-news__item"><!--1-->
18                <a class="top-news__item-link" href="#">
19                  <figure class="top-news__item-image"><img src="img/news01.jpg" alt=""></figure>
20                  <div class="top-news__item-texts">
21                    <time>2020.12.24</time>
22                    <div class="top-news__item-text">
23                      年末最後の営業日は27日になります。
24                    </div>
25                  </div>
26                </a>
27              </li>
28              <li class="top-news__item"><!--2-->
29                <a class="top-news__item-link" href="#">
30                  <figure class="top-news__item-image"><img src="img/news02.jpg" alt=""></figure>
31                  <div class="top-news__item-texts">
32                    <time>2020.12.24</time>
33                    <div class="top-news__item-text">
34                      年末最後の営業日のお知らせ
35                    </div>
36                  </div>
37                </a>
38              </li>
39            </ul>  
40
41            <ul class="top-news__list">
42              <li class="top-news__item"><!--3-->
43                <a class="top-news__item-link" href="#">
44                  <figure class="top-news__item-image"><img src="img/news02.jpg" alt=""></figure>
45                  <div class="top-news__item-texts">
46                    <time>2020.12.11</time>
47                    <div class="top-news__item-text">
48                      12.21は臨時休業とさせていただきますので、よろしくお願いします。
49                    </div>
50                  </div>
51                </a>
52              </li>
53              <li class="top-news__item"><!--4-->
54                <a class="top-news__item-link" href="#">
55                  <figure class="top-news__item-image"><img src="img/news01.jpg" alt=""></figure>
56                  <div class="top-news__item-texts">
57                    <time>2020.12.24</time>
58                    <div class="top-news__item-text">
59                      年末最後の営業日のお知らせ
60                    </div>
61                  </div>
62                </a>
63              </li>
64            </ul>
65
66            <ul class="top-news__list show">
67              <li class="top-news__item"><!--5-->
68                <a class="top-news__item-link" href="#">
69                  <figure class="top-news__item-image"><img src="img/news01.jpg" alt=""></figure>
70                  <div class="top-news__item-texts">
71                    <time>2020.12.01</time>
72                    <div class="top-news__item-text">
73                      和室の改装を行いますため、12.10はお休み<br>させていただきます。
74                    </div>
75                  </div>
76                </a>
77              </li>
78              <li class="top-news__item"><!--6-->
79                <a class="top-news__item-link" href="#">
80                  <figure class="top-news__item-image"><img src="img/news02.jpg" alt=""></figure>
81                  <div class="top-news__item-texts">
82                    <time>2020.12.24</time>
83                    <div class="top-news__item-text">
84                      年末最後の営業日のお知らせ
85                    </div>
86                  </div>
87                </a>
88              </li>
89            </ul>
90          </div>
91
92          <div class="top-news__list-wrap">
93            <ul class="top-news__list">
94              <li class="top-news__item"><!--1-->
95                <a class="top-news__item-link" href="#">
96                  <figure class="top-news__item-image"><img src="img/news02.jpg" alt=""></figure>
97                  <div class="top-news__item-texts">
98                    <time>2020.12.24</time>
99                    <div class="top-news__item-text">
100                      年末最後の営業日は27日になります。
101                    </div>
102                  </div>
103                </a>
104              </li>
105              <li class="top-news__item"><!--2-->
106                <a class="top-news__item-link" href="#">
107                  <figure class="top-news__item-image"><img src="img/news01.jpg" alt=""></figure>
108                  <div class="top-news__item-texts">
109                    <time>2020.12.24</time>
110                    <div class="top-news__item-text">
111                      年末最後の営業日のお知らせ
112                    </div>
113                  </div>
114                </a>
115              </li>
116            </ul>  
117    
118            <ul class="top-news__list show">
119              <li class="top-news__item"><!--3-->
120                <a class="top-news__item-link" href="#">
121                  <figure class="top-news__item-image"><img src="img/news01.jpg" alt=""></figure>
122                  <div class="top-news__item-texts">
123                    <time>2020.12.11</time>
124                    <div class="top-news__item-text">
125                      12.21は臨時休業とさせていただきますので、よろしくお願いします。
126                    </div>
127                  </div>
128                </a>
129              </li>
130              <li class="top-news__item"><!--4-->
131                <a class="top-news__item-link" href="#">
132                  <figure class="top-news__item-image"><img src="img/news02.jpg" alt=""></figure>
133                  <div class="top-news__item-texts">
134                    <time>2020.12.24</time>
135                    <div class="top-news__item-text">
136                      年末最後の営業日のお知らせ
137                    </div>
138                  </div>
139                </a>
140              </li>
141            </ul>
142    
143            <ul class="top-news__list show">
144              <li class="top-news__item"><!--5-->
145                <a class="top-news__item-link" href="#">
146                  <figure class="top-news__item-image"><img src="img/news02.jpg" alt=""></figure>
147                  <div class="top-news__item-texts">
148                    <time>2020.12.01</time>
149                    <div class="top-news__item-text">
150                      和室の改装を行いますため、12.10はお休み<br>させていただきます。
151                    </div>
152                  </div>
153                </a>
154              </li>
155              <li class="top-news__item"><!--6-->
156                <a class="top-news__item-link" href="#">
157                  <figure class="top-news__item-image"><img src="img/news01.jpg" alt=""></figure>
158                  <div class="top-news__item-texts">
159                    <time>2020.12.24</time>
160                    <div class="top-news__item-text">
161                      年末最後の営業日のお知らせ
162                    </div>
163                  </div>
164                </a>
165              </li>
166            </ul>
167          </div>
168        </div>
169      </div>
170    </section>

CSS
1.top-news__inner {
2  padding-top: 6rem;
3  padding-bottom: 6rem;
4  @include mq(tab-pc) {
5    padding-right: 1rem;
6    padding-left: 1rem;
7  }
8}
9.top-news__tab {
10  display: flex;
11  justify-content: center;
12  margin-top: 3rem;
13}
14.top-news__tab-menu {
15  margin-right: 3.5rem;
16  margin-left: 1.5rem;
17  font-size: 1.6rem;
18}
19.top-news__tab-menu.js-active {
20  border-bottom:  0.1rem solid $color-black;
21}
22.top-news__list-wrap {
23  display: none;
24  margin-top: 4.5rem;
25}
26.top-news__list-wrap.js-show {
27  display: block;
28}
29// .top-news__list-wrap2 {
30//   display: none;
31// }
32.top-news__list {
33  display: flex;
34  margin-top: 2rem;
35  @include mq(sp) {
36    flex-direction: column; 
37  }
38}
39.top-news__item {
40  min-width: 40%;
41  width: 100%;
42  padding: 1.5rem;
43  background-color: $color-lightGray;
44}
45.top-news__item:first-of-type {
46  margin-right: 4.6rem;
47}
48.top-news__item:nth-of-type(2) {
49  @include mq(sp) {
50    margin-top: 2rem;
51  }
52}
53.top-news__item-link {
54  display: flex;
55}
56.top-news__item-image {
57  max-width: 10.3rem;
58  aspect-ratio: 103 / 100;
59  margin-right: 3rem;
60  @include mq(sp) {
61    max-width: 8rem;
62    margin-right: 1.5rem;
63  }
64}
65.top-news__item-image img {
66  width: 100%;
67  height: 100%;
68  object-fit: cover;
69}
70.top-news__item-texts {
71  width: 60%;
72  @include mq(sp) {
73    width: 80%;
74  }
75}
76.top-news__item-texts time {
77  font-size: 1.4rem;
78}
79.top-news__item-text {
80  font-size: 1.6rem;
81  line-height: 1.8;
82  display: -webkit-box;
83  -webkit-box-orient: vertical;
84  -webkit-line-clamp: 2;
85  overflow: hidden;
86}

jQuery
1$(function() {
2  $('.top-news__tab-menu').click(function() {
3    var index = $('.top-news__tab-menu').index(this);
4    $('.top-news__tab-menu, .top-news__list-wrap').removeClass('js-active');
5    $(this).addClass('js-active');
6    $('.top-news__list-wrap').eq(index).addClass('js-active');
7  });
8});

試したこと

色々と調べて、jQueryの書き方を変えたりしましたが変わりませんでした。

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

回答1件

ベストアンサー

CSSが下記になっているので、

css
1.top-news__list-wrap.js-show {
2  display: block;
3}

ニュース一覧（class="top-news__list-wrap"）の表示/非表示の切り替えは、js-show クラスの付け外しです。

js/jQuery
1$(function() {
2  $('.top-news__tab-menu').click(function() {
3    var index = $('.top-news__tab-menu').index(this);
4    $('.top-news__tab-menu').removeClass('js-active');
5    $('.top-news__list-wrap').removeClass('js-show');
6    $(this).addClass('js-active');
7    $('.top-news__list-wrap').eq(index).addClass('js-show');
8  });
9});