クリックして画像切り替えがうまくいかない、画面が動いてしまう

前提

https://junpei-sugiyama.com/thumbnail-switching-image/

こちらのサイトで紹介されているjQueryと

https://www.boel.co.jp/tips/vol86/

こちらで紹介されているタブ機能を使用して、

サンプル画像を表示・切り替えができるように設定したいと考えていますが、
サブの画像をクリックするとメインの画像に合わせて画面が移動してしまいます。
また、タブをクリックして別の画像を表示する際、クリック後に本来表示されるはずの画像が出ず、クリック前のメイン画像が表示されてしまいます。

jQueryコードはいじっていません。

実現したいこと

サブ画像をクリックしても画面がズレないようにしたい
タブクリック後に正しい画像を表示させたい

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

画像の状態と、別のタブを開くと前に選択していた位置にあるサブ画像（前のタブで中央の画像を表示していたなら開いたタブでも中央の画像）が開いてしまいます。新しいタブを開いた際は1番左の画像が表示されるようにしたいです。
こちらも解決策がありましたら教えていただきたいです。

該当のソースコード

HTML
1<main>		
2	
3<div class="main">
4	<h1 class="border" id="sample__page">製作事例のご紹介</h1>
5	<div class="tab_wrap">
6	<input id="tab1" type="radio" name="tab_btn" checked>
7	<input id="tab2" type="radio" name="tab_btn">
8	<input id="tab3" type="radio" name="tab_btn">
9	<input id="tab4" type="radio" name="tab_btn">
10	<input id="tab5" type="radio" name="tab_btn">
11	<input id="tab6" type="radio" name="tab_btn">
12
13	<div class="tab_area">
14		<label class="tab1_label" for="tab1">tab1</label>
15		<label class="tab2_label" for="tab2">tab2</label>
16		<label class="tab3_label" for="tab3">tab3</label>
17		<label class="tab4_label" for="tab4">tab4</label>
18		<label class="tab5_label" for="tab5">tab5</label>
19		<label class="tab6_label" for="tab6">tab6</label>
20	</div>
21	<div class="panel_area"><!--画像サイズ800×600-->
22		<div id="panel1" class="tab_panel">
23			<!-- メイン画像 -->
24			<div class="main-img js-main-img">
25				<p><img src="images/861.svg" alt=""></p>
26				<p>サンプル</p>
27				<p>これはサンプルテキストです</p>
28			</div>
29			<!-- サムネイル画像 -->
30			<ul class="sub-img js-sub-img">
31				<!-- 選択されている画像の枠線を変更 -->
32				<li class="current">
33					<img src="images/861.svg" alt="" />
34				</li>
35				<li>
36					<img src="images/864.svg" alt="" />
37				</li>
38				<li>
39					<img src="images/866.svg" alt="" />
40				</li>
41			</ul>
42		</div>
43		<div id="panel2" class="tab_panel">
44			<!-- メイン画像 -->
45			<div class="main-img js-main-img">
46				<p><img src="images/861.svg" alt=""></p>
47				<p>サンプル</p>
48				<p>これはサンプルテキストです</p>
49			</div>
50			<!-- サムネイル画像 -->
51			<ul class="sub-img js-sub-img">
52				<!-- 選択されている画像の枠線を変更 -->
53				<li class="current">
54					<img src="images/861.svg" alt="" />
55				</li>
56				<li>
57					<img src="images/864.svg" alt="" />
58				</li>
59				<li>
60					<img src="images/866.svg" alt="" />
61				</li>
62			</ul>
63		</div>
64		<div id="panel3" class="tab_panel">
65			<!-- メイン画像 -->
66			<div class="main-img js-main-img">
67				<p><img src="images/861.svg" alt=""></p>
68				<p>サンプル</p>
69				<p>これはサンプルテキストです</p>
70			</div>
71			<!-- サムネイル画像 -->
72			<ul class="sub-img js-sub-img">
73				<!-- 選択されている画像の枠線を変更 -->
74				<li class="current">
75					<img src="images/861.svg" alt="" />
76				</li>
77				<li>
78					<img src="images/864.svg" alt="" />
79				</li>
80				<li>
81					<img src="images/866.svg" alt="" />
82				</li>
83			</ul>
84		</div>
85		<div id="panel4" class="tab_panel">
86			<!-- メイン画像 -->
87			<div class="main-img js-main-img">
88				<p><img src="images/861.svg" alt=""></p>
89				<p>サンプル</p>
90				<p>これはサンプルテキストです</p>
91			</div>
92			<!-- サムネイル画像 -->
93			<ul class="sub-img js-sub-img">
94				<!-- 選択されている画像の枠線を変更 -->
95				<li class="current">
96					<img src="images/861.svg" alt="" />
97				</li>
98				<li>
99					<img src="images/864.svg" alt="" />
100				</li>
101				<li>
102					<img src="images/866.svg" alt="" />
103				</li>
104			</ul>
105		</div>
106		<div id="panel5" class="tab_panel">
107			<!-- メイン画像 -->
108			<div class="main-img js-main-img">
109				<p><img src="images/861.svg" alt=""></p>
110				<p>サンプル</p>
111				<p>これはサンプルテキストです</p>
112			</div>
113			<!-- サムネイル画像 -->
114			<ul class="sub-img js-sub-img">
115				<!-- 選択されている画像の枠線を変更 -->
116				<li class="current">
117					<img src="images/861.svg" alt="" />
118				</li>
119				<li>
120					<img src="images/864.svg" alt="" />
121				</li>
122				<li>
123					<img src="images/866.svg" alt="" />
124				</li>
125			</ul>
126		</div>
127		<div id="panel6" class="tab_panel">
128			<!-- メイン画像 -->
129			<div class="main-img js-main-img">
130				<p><img src="images/861.svg" alt=""></p>
131				<p>サンプル</p>
132				<p>これはサンプルテキストです</p>
133			</div>
134			<!-- サムネイル画像 -->
135			<ul class="sub-img js-sub-img">
136				<!-- 選択されている画像の枠線を変更 -->
137				<li class="current">
138					<img src="images/861.svg" alt="" />
139				</li>
140				<li>
141					<img src="images/864.svg" alt="" />
142				</li>
143				<li>
144					<img src="images/866.svg" alt="" />
145				</li>
146			</ul>
147		</div>
148	</div>
149</div>
150
151</div>
152</main>

/*クリックでタブ変更*/

.tab_wrap{
	width:100%;
}

input[type="radio"]{
	display:none;
}/*radioボタンのチェックを消す*/

.tab_area{
	font-size:0; 
	margin:0 auto;
	text-align: center;
}

.tab_area label{
	width:120px; 
	margin:5px 5px; 
	display:inline-block; 
	padding:12px 10px; 
	color:#999; 
	background:#FFFFFF;
	border: solid 1px #B4B4B4;
	text-align:center; 
	font-size: clamp(0.75rem, 0.9vw, 0.9rem); 
	font-weight: normal;
	cursor:pointer; 
	transition:ease 0.5s;
}

@media screen and ( max-width : 700px ){
  .tab_area label{
	  width: 100px;
  }
}

.tab_area label:hover{
	opacity:0.3;
}
.panel_area{
	background:#fff;
	margin-top: 10px;
}

.tab_panel{
	width:100%; 
	padding:20px 0; 
	display:none;
}

.tab_panel img{
	width: 100%;
	align-items: flex-start;
}

.tab_panel>div{
	gap:3%;
	margin-top: 20px;
	text-align: center;
}

.tab_panel>div img{
	width: 100%;
}

.tab_panel>div>p:nth-child(2){
	font-size: clamp(0.9rem, 1vw, 1.0rem); 
	letter-spacing:1px;
	text-align:center;
	margin-top: 10px;
}

.tab_panel>div>p:nth-child(3){
	margin-top: 10px;
}

#tab1:checked ~ .tab_area .tab1_label{
	background:#D43030;
	color:#FFFFFF;
	border: solid 2px #000000;
}
#tab1:checked ~ .panel_area #panel1{
	display:block;
}

#tab2:checked ~ .tab_area .tab2_label{
	background:#D43030;
	color:#FFFFFF;
	border: solid 2px #000000;
}
#tab2:checked ~ .panel_area #panel2{
	display:block;
}

#tab3:checked ~ .tab_area .tab3_label{
	background:#D43030;
	color:#FFFFFF;
	border: solid 2px #000000;
}
#tab3:checked ~ .panel_area #panel3{
	display:block;
}

#tab4:checked ~ .tab_area .tab4_label{
	background:#D43030;
	color:#FFFFFF;
	border: solid 2px #000000;
}
#tab4:checked ~ .panel_area #panel4{
	display:block;
}

#tab5:checked ~ .tab_area .tab5_label{
	background:#D43030;
	color:#FFFFFF;
	border: solid 2px #000000;
}
#tab5:checked ~ .panel_area #panel5{
	display:block;
}

#tab6:checked ~ .tab_area .tab6_label{
	background:#D43030;
	color:#FFFFFF;
	border: solid 2px #000000;
}
#tab6:checked ~ .panel_area #panel6{
	display:block;
}


/*クリックで画像を変更*/


/* アクティブな画像の枠線を変更 */
.sub-img li.current img {
  border: 2px solid #898989;
  transition: border .5s;
}
/* レイアウトのためのスタイル */
.container {
  margin: 50px auto 0;
  max-width: 500px;
}
.main-img {
  width: 100%;
}
.main-img img {
  height: auto;
  width: 100%;
}
.sub-img {
  display: flex;
  margin-top: 18px;
}
.sub-img li {
  margin-right: 2%;
  width: calc(96% / 3);
}
.sub-img li:nth-child(3n) {
  margin-right: 0;
}
.sub-img li img {
  border: 2px solid transparent;
  transition: border .5s;
}
.sub-img img {
  cursor: pointer;
  width: 100%;
}

javascript
1$(function () {
2  $(".js-sub-img img").on("click", function () {
3    // メイン画像に切り替えるimgのsrc取得
4    img = $(this).attr("src");
5    // currentクラス付け替え(枠線などを変えたい時に)
6    $(".js-sub-img li").removeClass("current");
7    $(this).parent().addClass("current");
8    // fadeOutできたらsrc変更してfadeIn
9    $(".js-main-img img").fadeOut(500, function () {
10      $(".js-main-img img")
11        .attr("src", img)
12        .on("load", function () {
13          $(this).fadeIn(500);
14        });
15    });
16  });
17});

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

sp1

2022/10/05 08:35

【発生している問題】の欄に書いてあることはミスです。すみません。

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

回答1件

ベストアンサー

サブの画像をクリックするとメインの画像に合わせて画面が移動してしまいます。

これは fadeOut() とスクロールアンカリングの組み合わせで起きているのかもしれません。fadeOut() は最後に対象要素を display: none; にして、画面上で場所を占めなくなります。スクロールアンカリングが働いてクリックした画像などが上にシフトするのを防ぐためにスクロールオフセットが最小値になってしまう、のかもしれません。(検証はしてないので間違っているかも)
display: none; になるのをやめれば解消するかもしれません。fadeOut() では避けられないので、fadeOut() をやめることになります。

タブをクリックして別の画像を表示する際、...、クリック前のメイン画像が表示されてしまいます。

これは、JavaScriptコード中の $(".js-main-img img") が「すべてのタブのメイン画像」を指しているからです。「クリックされた画像が属するタブのメイン画像」に限定して処理する必要があります。

以上を踏まえて、fadeOut() 以降のコードを以下のようにするといいかもしれません。

js
1    let mainImg = this.closest('.tab_panel').querySelector(".js-main-img img");
2    let fade = mainImg.animate([{opacity:'0'}], {duration:500, fill:"forwards"});
3    fade.addEventListener('finish', () => {
4      mainImg.src = img;
5      fade.reverse();
6    }, {once:true});

投稿2022/10/05 22:54

int32_t

総合スコア20884

sp1

2022/10/06 02:48

ご回答ありがとうございます。こちらで合っていますでしょうか…？クリック後に別の画像が出てしまう問題は解決したのですが、サブ画像のクリックができなくなってしまいました。また、fadeOut()がなくなると、画像の切り替えがふんわりとはしなくなるという認識で合っていますでしょうか。間違いがあればご指摘いただけますと幸いです。 <script> $(function () { $(".js-sub-img img").on("click", function () { // メイン画像に切り替えるimgのsrc取得 img = $(this).attr("src"); // currentクラス付け替え(枠線などを変えたい時に) $(".js-sub-img li").removeClass("current"); $(this).parent().addClass("current"); // fadeOutできたらsrc変更してfadeIn $(".js-main-img img").let mainImg = this.closest('.tab_panel').querySelector(".js-main-img img"); let fade = mainImg.animate([{opacity:'0'}], {duration:500, fill:"forwards"}); fade.addEventListener('finish', () => { mainImg.src = img; fade.reverse(); }, {once:true}); }); }); </script>

int32_t

2022/10/06 02:56 編集

> fadeOut()がなくなると、画像の切り替えがふんわりとはしなくなるという認識で合っていますでしょうか。 fadeOut()は使わずにフェードアウトアニメーションをさせるべきということです。 > $(".js-main-img img").let mainImg = ... この「$(".js-main-img img").」は不要です。

sp1

2022/10/06 04:07

ご回答ありがとうございます。現状の私の知識では理解が難しいので色々と調べてみようと思います。動きました、ありがとうございました！

sp1

2022/10/06 08:14

度々すみません、初期状態では class="current" で最初のサブ画像に枠線がついているのですが、別のサブ画像をクリックした後に他タブに移動すると、枠線が消えてしまいます。移動後のタブでサブ画像をクリックすると再び表示されるのですが… この問題は解決可能でしょうか？

int32_t

2022/10/06 08:55

もとの質問文にはない問題なので、新しい質問を立ててください。

sp1

2022/10/06 23:56

すみません、バグだったようで再起動したら解決しました。次からは新しい質問を立てるようにします。ありがとうございました。