click() not working as expected

$j('#carousel').jcarousel({
    vertical: true,
    scroll: 1,
    auto: 2,
    wrap: 'last',
    initCallback: mycarousel_initCallback
});
$j('div#slideshow-carousel a img').css({
    'opacity': '0.5'
});
$j('div#slideshow-carousel a img:first').css({
    'opacity': '1.0'
});
$j('div#slideshow-carousel li a').hover(
function () {
    if (!$j(this).has('span').length) {
        $j('div#slideshow-carousel li a img').stop(true, true).css({
            'opacity': '0.5'
        });
        $j(this).stop(true, true).children('img').css({
            'opacity': '1.0'
        });
    }
}, function () {
    $j('div#slideshow-carousel li a img').stop(true, true).css({
        'opaci开发者_运维问答ty': '0.5'
    });
    $j('div#slideshow-carousel li a').each(function () {
        if ($j(this).has('span').length) $j(this).children('img').css({
            'opacity': '1.0'
        });
    });
}).click(function () {
    $j('div#slideshow-main li').removeClass('active');
    $j('div#slideshow-main li.' + $j(this).attr('rel')).addClass('active');
    return false;
});

This simple carousel script works perfectly except the click part; nothing happens on clicking the thumbnails, they should be applied the 'active' class.

I think you're using slideshow-main where you mean slideshow-carousel, e.g. this:

}).click(function () {
    $j('div#slideshow-main li').removeClass('active');
    $j('div#slideshow-main li.' + $j(this).attr('rel')).addClass('active');
    return false;
});

should be:

}).click(function () {
    $j('div#slideshow-carousel li').removeClass('active');
    $j('div#slideshow-carousel li.' + $j(this).attr('rel')).addClass('active');
    return false;
});

Seems to work, anyway: http://jsbin.com/aliqi3