jQuery onClick code only firing for first element

I am finding trouble getting my thumbnails to open the larger images when clicked. It only seems to work with the first thumbnail, but I can't figure out why.

Here is the code I am working with:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="js/jquery.colorbox-min.js"></script>

<script type="text/javascript">    
$('#main ul:first-child').show();

$('#thumb li').click(function(开发者_开发知识库){
    var navItem = $(this).index();
    $('#main ul').hide();
    $('#main ul:nth-child('+(navItem+1)+')').show();
    return false;
});

$('#main ul a').colorbox();

});
</script>

Any help??

You're calling .hide() on the <ul>. That will hide the entire structure; subsequently making the nested <li> components visible won't have any effect because the parent is hidden.

Instead of that, hide all the <li> elements:

  $('#main ul li').hide();

That will hide all the <li> children where (presumably) your large images reside. Then, your next line of code will show the one you want to show (the one corresponding to the clicked thumbnail).

Assuming that's the entire code, you have an error on the last line of the script:

$('#thumb li').click(function(){

  [snip]

});

$('#main ul a').colorbox();

});

The }); doesn't belong to anything. In this case, if you check your browser's javascript console, you'll most likely see the error on that line.