버튼 클릭시 같은 순서 이미지 보이기, 버튼문구 제목에 넣어주기

.pop-rcpt{

display:none;

text-align:center;

}

.pop-rcpt img{

max-width:100%;

height:auto;

}

.pop-rcpt01{

display:block;

}

.pop-rcpt-btn{

display:inline-block;

width:120px;

height:35px;

line-height:35px;

border:1px solid #000;

text-align:center;

margin-left:30px;

}

.pop-rcpt-btn01{

margin-left:0;

}

.pop-rcpt-btn.on{

background:yellow;

}

.pop-rcpt-btn-box{

margin-bottom:10px;

}

//

<div class="pop pop_con pop-rcpt-box">

<h3 style="height:25px; color:#fff; padding:20px; background: #39549b; text-indent:0;">영수증1</h3>

<div>

<div class="pop-rcpt pop-rcpt01">

<img src="https://picsum.photos/900/600" alt="">

</div>

<div class="pop-rcpt pop-rcpt02">

<img src="https://picsum.photos/900/620" alt="">

</div>

<div class="pop-rcpt pop-rcpt03">

<img src="https://picsum.photos/900/647" alt="">

</div>

</div>

<div class="pop-rcpt-btn-box">

<a href="javascript:;" class="pop-rcpt-btn pop-rcpt-btn01 on">영수증1</a>

<a href="javascript:;" class="pop-rcpt-btn pop-rcpt-btn02">영수증2</a>

<a href="javascript:;" class="pop-rcpt-btn pop-rcpt-btn03">통장사본</a>

</div>

<button type="button"  class="pop_close simplemodal-close"  style="cursor: pointer; top:20px; right:20px;" >창 닫기</button>

</div>

//

$(".pop-rcpt-btn").click(function(){

$(this).addClass("on");

$(this).siblings("a").removeClass("on");

//버튼클릭시 같은 순서 이미지뿌리기

var btnIndex=$(this).index();

var $rcptImg=$(".pop-rcpt");

$rcptImg.hide();

$rcptImg.eq(btnIndex).show();

//버큰 클릭시 제목에 버튼텍스트로 교체

var btnText = $(this).text();

$(".pop-rcpt-box h3").text(btnText);

});

출처 : 저의 jsffidle ㅋㅋ

https://jsfiddle.net/webweb/ho08c9ss/

https://jsfiddle.net/webweb/39kwwa8o/

https://jsfiddle.net/webweb/5hat2jre/