제이쿼리 _차색바꾸기

by Kim Ara

HTML

<div class="colorchip-wrap">
  <div class="car-container">
    <img src="//www.jeep.co.kr/17_renegade/images/vlp/Modelizer/limited/colorchip/Granite-Crystal-Metallic-Clear-Coat.jpg" alt="Granite Crystal Metallic Clear-Coat Exterior Paint" id="limited-Granite-Crystal" class="selected">
    <img src="//www.jeep.co.kr/17_renegade/images/vlp/Modelizer/limited/colorchip/Alpine-White-Exterior.jpg" alt="Alpine White Exterior Paint" id="limited-Alpine-White">
    <img src="//www.jeep.co.kr/17_renegade/images/vlp/Modelizer/limited/colorchip/Black-Exterior.jpg" alt="Black Exterior Paint" id="limited-Black" class="">
    <img src="//www.jeep.co.kr/17_renegade/images/vlp/Modelizer/limited/colorchip/Anvil-Exterior.jpg" alt="Anvil Exterior Paint" id="limited-Anvil" class="">
  </div>
  
  <div class="color-container color-7">
    <a href="#limited-Granite-Crystal" class="color-gc" class="selected"><div></div><p>Granite Crystal Metallic Clear-Coat Exterior Paint</p></a>
    <a href="#limited-Alpine-White" class="color-bw"><div></div><p>Alpine White Exterior Paint</p></a>
    <a href="#limited-Black" class="color-bc"><div></div><p>Black Exterior Paint</p></a>
    <a href="#limited-Anvil" class="color-ae"><div></div><p>Anvil Exterior Paint</p></a>
  </div>
</div>

CSS

img{width:100%}
.colorchip-wrap{position:relative;width:500px;text-align:center;float:left}
.colorchip-wrap .car-container{position:relative}
.colorchip-wrap .car-container img{display:none}
.colorchip-wrap .car-container img.selected{display:block}
.colorchip-wrap .color-container{overflow:hidden;margin:0 auto;padding:0 0 25px 0}
.colorchip-wrap .color-container.color-7{width:372px}
.colorchip-wrap .color-container a{float:left;display:block;margin: 0 2%;padding:2px;border:1px solid #fff;border-radius:100%}
.colorchip-wrap .color-container a:hover, .models-cont .colorchip-wrap .color-container a.selected{border:1px solid #000}
.colorchip-wrap .color-container a div{width:30px;height:30px;border:1px solid #666;border-radius:100%}
.color-container .color-bw div{background:#fff}
.color-container .color-gc div{background:#333738}
.color-container .color-bc div{background:#0e0a09}
.color-container .color-ae div{background:#3d3b3c}
.colorchip-wrap .color-container a p{display:none;position:absolute;bottom:0;left:0;width:100%;background:#fff;font-size:12px;color:#000;text-align:center;cursor:default}
.colorchip-wrap .color-container a:hover p, .models-cont .colorchip-wrap .color-container a.selected p{display:block}
.colorchip-wrap .color-container a:hover p{color:#636363;z-index:1}

JavaScript

$(document).ready(function(){

	$('.color-container > a').click(function(){
  	
    $(this).siblings().removeClass('selected');
    $(this).addClass('selected');
    
    $('.car-container img').removeClass('selected');
    $($(this).attr('href')).addClass('selected');
  
  });
});