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.