<div class="single-product-sml-img">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#one"  role="tab" data-toggle="tab"> <img src="img/product/single/2.jpg" alt="" /></a>
</li>
<li role="presentation">
<a href="#two" role="tab" data-toggle="tab"><img src="img/product/single/3.jpg" alt="" /></a>
</li>
<li role="presentation">
<a href="#three" role="tab" data-toggle="tab"><img src="img/product/single/4.jpg" alt="" /></a>
</li>
<li role="presentation">
<a href="#four" role="tab" data-toggle="tab"><img src="img/product/single/5.jpg" alt="" /></a>
</li>
<li role="presentation">
<a href="#five" role="tab" data-toggle="tab"><img src="img/product/single/6.jpg" alt="" /></a>
</li>
</ul>
</div>

Ben bu kodu eklemeyi unutmuşum kusura bakmayın. Bu da o küçük resim bölümü Bunu nasıl yapacağım. #two, #three de yukardaki kodların id bölümü ile aynı oluyor.

<div role="tabpanel" class="tab-pane" [B]id="three"[/B]>

Kalın olan yer ile. Burayı nasıl halledebilirim.