클릭시 색상유지되는 디자인 채택완료

<style>

/*--end-header--*/
/*--start-about--*/
.about-main {
    text-align:center;
    margin-top: 5%;

.clients-bottom p {
    padding: 0px 10px;
    overflow: hidden;
    height: 46px;
}
.callbacks_tabs {
    left: 30%;
}
.callbacks_nav {
    top: 37%;
}
.blog-left h4 {
    font-size: 12px;
    top: 52%;
    letter-spacing: 2px;
    left: 33%;
}
.clients-left:nth-child(2){
    display:none;
}
.clients-left {
    width: 100%;
}
.clients-bottom-top {
    margin-top: 1em;
}
.quality-top-one:nth-child(3),.quality-top-one:nth-child(4),.quality-top-one:nth-child(5){
    display:none;
}
.quality-top-one {
    width: 50%;
}
.quality-top-one span {
    width: 95px;
    height: 115px;
}
.quality-bottom {
    left: 30%;
    top: 22%;
}
.quality-bottom-dsg {
    top: 44% !important;
    left: 35% !important;
}
.quality-main p {
    font-size: 15px;
    margin-top: 7px;
}
.col-md-4.price-left:nth-child(2),.col-md-4.price-left:nth-child(3){
    display:none;
}
.price {
    padding: 2em 0px 11px 0px;
}
.price-top {
    margin-top: 25%;
}
.price-left-two, .price-left-top {
    width: 105px;
    height: 125px;
    top: -24px;
    left: 34px;
}
#hexagon:before, #hexagon1:before {
    top: -45px;
    border-left: 85px solid transparent;
    border-right: 85px solid transparent;
    border-bottom: 45px solid #b4b4b4;
}
#hexagon:after, #hexagon1:after {
    bottom: -45px;
    border-left: 85px solid transparent;
    border-right: 85px solid transparent;
    border-top: 45px solid #b4b4b4;
}
#hexagon {
    width: 170px;
    height: 240px;
}
.price-left-one ul {
    padding: 0px;
    position: absolute;
    top: 56%;
    left: 22%;
}
.price-left-two h5, .price-left-top h5 {
    font-size: 13px;
    margin: 30% 0px 0px 0px;
}
.price-left-two p, .price-left-top p {
    font-size: 12px;
    margin-top: 2px;
}
.price-left-two p sup, .price-left-top p sup {
    font-size: 15px;
}
.price-left-two p span, .price-left-top p span {
    font-size: 2.3em;
}
.price-left-two a, .price-left-top a {
    width: 26px;
    height: 29px;
    top: 69%;
    left: 60%;
}
}
/*--media-quaries-end-here--*/

/*----------------------------------------------------------헤드셋 색깔 변경------------*/
div#navi{width:1200px;}
div#navi ul li span{color:#9e9e9e;}

ul.p_left{position:relative;width:260px;left:0;top:100px;text-align:right;list-style:none;float:left;}
ul.p_right{position:relative;width:260px;right:0;top:100px;text-align:left;list-style:none;float:right;}
div#main{width:650px;left:0;top:0;float:left;padding:25px 10px;}
div#main > img{width:650px;left:0;top:0;float:left;padding:25px 10px;}
 

</style>

<!--start-quality-->
<script type="text/javascript">

    $(function(){
        $("div#navi ul li a").click(function(){
            $("div#main img").attr("src",$(this).attr("href"));
            return false;
        });
        

    });//jquery 끝부분

</script>

    <div class="quality" id="color">
        <div class="container">
            <div class="quality-main">
                <div id="navi">
                <ul class="p_left">
                    <h2>첫번째 색상 </h2>
                    <li><span>BLACK MASH</span><a href="images/b-mash.png"/><img src="images/b-button.png"/></a></li>
                    <li><span>GRAY MASH</span><a href="images/g-mash.png"/><img src="images/g-button.png"/></a></li>
                </ul>
                <ul class="p_right">
                    <h2>두번째 색상 </h2>
                    <li><a href="images/orange.png"><img src="images/1.png"/></a><span>orange</span></li>
                    <li><a href="images/green.png"/><img src="images/2.png"/></a><span>green</span></li>
                    <li><a href="images/blue.png"/><img src="images/3.png"/></a><span>blue</span></li>
                </ul>            
                </div><!--navi-->
        
                <div id="main">
                <img src="images/frame.png" alt="계속 유지되어야 할 이미지 (고정)" />
                </div><!--main-->

                </div><!--quality-main-->
        </div><!--container--->
    </div><!---id color--->

    <!--end-quality-->
 

왼쪽 오른쪽 색상 버튼으로 조합해서 이미지가 보여지는 방식인데

버튼을 누르면 그 해당 이미지만 나타나고 (alt="계속 유지해야할 이미지)도 사라집니다.

방법을 어떻게 해야하는지 모르겠어요 ㅠㅠ

첫번째 색상버튼 누르면 해당 버튼 이미지가 생기고

두번쨰 색상버튼을 누르면 a버튼을 눌렀던건 사라지지 않고 유지가 되어야 합니다.
 

        

            

                

                

•                     

첫번째 색상 

                    BLACK MASH                     GRAY MASH                                  

•                     

두번째 색상

                    orange                     green                     blue