How to add class .selected dynamically to selected element here?
<p>In this example . By clicking on thumbnail , big images is getting changed. I want to add border to selected thumbnail.</p>

<p>see example here <a href="http://jsfiddle.net/Qhdaz/2/" rel="nofollow">http://jsfiddle.net/Qhdaz/2/</a></p>

<p>HTML</p>

<pre><code>&lt;div id="big-image"&gt;
    &lt;img src="http://lorempixel.com/400/200/sports/1/"&gt;
    &lt;img src="http://lorempixel.com/400/200/fashion/1/"&gt;
    &lt;img src="http://lorempixel.com/400/200/city/1/"&gt;
&lt;/div&gt;

&lt;div class="small-images"&gt;
    &lt;img src="http://lorempixel.com/100/50/sports/1/"&gt;
    &lt;img src="http://lorempixel.com/100/50/fashion/1/"&gt;
    &lt;img src="http://lorempixel.com/100/50/city/1/"&gt;
&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>.small-images a, .big-images a {display:inline-block}
.small-images a.selected {border:1px solid red}
</code></pre>

<p>Current jQuery code</p>

<pre><code>$(function(){
    $("#big-image img:eq(0)").nextAll().hide();
    $(".small-images img").click(function(e){
        var index = $(this).index();
        $("#big-image img").eq(index).show().siblings().hide();
    });
});
</code></pre>
