버튼 클릭시 같은 순서 이미지 보이기, 버튼문구 제목에 넣어주기
.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/