javascript - カルーセルで選択した項目をクリックすると強調表示されます (jQuery を使用)

Question

私はTwitterのブートストラップカルーセルを使用しています。

ユーザーがカルーセルから1つのアイテムを選択し、サイズを大きくしたい場合、

たとえば、次のようにします。

私はこのようなhtmlを持っています:

<ul class="thumbnails" data-bind="foreach: AchievementItem">
    <li class="span3">
        <div class="thumbnail" tabindex="1">
            <div data-bind="click: $root.GetAchievement">
                <img data-bind="attr: { src: ImageFileName, id: 'thumbnail' + Soid }" src="../Images/DefaultPhoto.png" id="thumbnail521dfe57d94eaf0900bf5355">
            </div>
            <img src="../Images/trashIcon.png" class="trash" data-bind="attr: { id: 'trash' + Soid }, click: $root.DeleteAchievement" id="trash521dfe57d94eaf0900bf5355">
        </div>
        <div class="caption">
             <h5 data-bind="attr: { title: Title, id: 'caption' + Soid }, text: Title" title="Achievement 005" id="caption521dfe57d94eaf0900bf5355">Achievement 005</h5>

        </div>
    </li>
    <li class="span3">
        <div class="thumbnail" tabindex="1">
            <div data-bind="click: $root.GetAchievement">
                <img data-bind="attr: { src: ImageFileName, id: 'thumbnail' + Soid }" src="../Images/DefaultPhoto.png" id="thumbnail521dfe56d94eaf0900bf5354">
            </div>
            <img src="../Images/trashIcon.png" class="trash" data-bind="attr: { id: 'trash' + Soid }, click: $root.DeleteAchievement" id="trash521dfe56d94eaf0900bf5354">
        </div>
        <div class="caption">
             <h5 data-bind="attr: { title: Title, id: 'caption' + Soid }, text: Title" title="Achievement 004" id="caption521dfe56d94eaf0900bf5354">Achievement 004</h5>

        </div>
    </li>
    <li class="span3">
        <div class="thumbnail" tabindex="1">
            <div data-bind="click: $root.GetAchievement">
                <img data-bind="attr: { src: ImageFileName, id: 'thumbnail' + Soid }" src="../Images/DefaultPhoto.png" id="thumbnail521dfe56d94eaf0900bf5353">
            </div>
            <img src="../Images/trashIcon.png" class="trash" data-bind="attr: { id: 'trash' + Soid }, click: $root.DeleteAchievement" id="trash521dfe56d94eaf0900bf5353">
        </div>
        <div class="caption">
             <h5 data-bind="attr: { title: Title, id: 'caption' + Soid }, text: Title" title="Achievement 003" id="caption521dfe56d94eaf0900bf5353">Achievement 003</h5>

        </div>
    </li>
</ul>

ユーザーが<li>要素をクリックすると、そのli要素の幅と高さを大きくし、その他のアイテムを通常どおりにしたいのですが、