Question

In this example . By clicking on thumbnail , big images is getting changed. I want to add border to selected thumbnail.

see example here http://jsfiddle.net/Qhdaz/2/

HTML

<div id="big-image">
    <img src="http://lorempixel.com/400/200/sports/1/">
    <img src="http://lorempixel.com/400/200/fashion/1/">
    <img src="http://lorempixel.com/400/200/city/1/">
</div>

<div class="small-images">
    <img src="http://lorempixel.com/100/50/sports/1/">
    <img src="http://lorempixel.com/100/50/fashion/1/">
    <img src="http://lorempixel.com/100/50/city/1/">
</div>

CSS

.small-images a, .big-images a {display:inline-block}
.small-images a.selected {border:1px solid red}

Current jQuery 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();
    });
});

Answer 1

Your CSS is looking for a tags with the selected class not img tags:

This:

.small-images a.selected {border:1px solid red}

Should change to:

.small-images .selected {border:1px solid red}

Other than that you just need to add and remove the selected class on click:

$(function(){
    $("#big-image img:eq(0)").nextAll().hide();
    $(".small-images img").click(function(e){
        var $this = $(this),
            index = $this.index();
        $(".small-images img").removeClass('selected');
        $this.addClass('selected');
        $("#big-image img").eq(index).show().siblings().hide();
    });
});

Here is a demo: http://jsfiddle.net/Qhdaz/6/

UPDATED

I would suggest optimizing the code a bit by caching the $(".small-images img") selection since it will be used in each click event handler:

$(function(){
    var $thumbnails = $(".small-images img");

    //this will add the `selected` class to the first thumbnail on-load
    $thumbnails.eq(0).addClass('selected');
    $("#big-image img:eq(0)").nextAll().hide();
    $thumbnails.click(function(e){

        //cache the `$(this)` selector since it will be used more than once
        var $this = $(this),
            index = $this.index();

        //remove `selected` class from all thumbnails
        $thumbnails.removeClass('selected');
        //add `selected` class to selected thumbnail
        $this.addClass('selected');

        $("#big-image img").eq(index).show().siblings().hide();
    });
});

Here is a demo: http://jsfiddle.net/Qhdaz/12/

Here is your code optimized to run speedily:

CSS–

/*this will hide the full-sized images by default to take care of the flickering on-load*/
#big-image img {
    display : none;
}

JS–

$(function(){

    //cache both the thumbnails and the full-sized images so when we do work on them we don't have to wait for the performance hating selector to do it's magic
    var $thumbnails = $(".small-images img"),
        $fullsized  = $("#big-image img");

    //add `selected` class to first thumbnail
    $thumbnails.eq(0).addClass('selected');

    //show first full-sized image (no
    $fullsized.eq(0).show();

    //add `click` event handlers to all the thumbnails
    $thumbnails.click(function(e){

        //cache the `$(this)` selector since it will be used more than once
        var $this = $(this),
            index = $this.index();

        //remove the `selected` class from all thumbnails
        $thumbnails.removeClass('selected');

        //add the `selected` class to selected thumbnail
        $this.addClass('selected');

        //hide all the full-sized images and show the currently selected index
        $fullsized.hide().eq(index).show();
    });
});

Demo: http://jsfiddle.net/Qhdaz/13/