image swap

by hellosze

HTML

<div class="images_c">
    <ul class="images">
        <li class="show"><img src="http://placekitten.com/200/300"></li>
        <li><img src="http://placekitten.com/210/300"></li>
        <li><img src="http://placekitten.com/220/300"></li>        
</div>
<div class="links2">
    <ul class="links">
        <li>Image 1</li>
        <li>Image 2</li>
        <li>Image 3</li>
    </ul>
</div>

CSS

.images li { display: none; }
.images li.show { display: block; }

JavaScript

$(".links li").click(function(){
   i = $(this).index(".links li"); 
   //alert(i);
   $(".images li").removeClass("show");
   $(".images li").eq(i).addClass("show");
});