سلام،
با جی کویری به عنصری که کلیک شده کلاس فعال می دید و از همسایه هاش کلاس فعال رو می گیرید.
برای نمایش محتویات متناسب سربرگ هم از ایندکس سربرگی که کلیک شده، استفاده کنید.
مثلا:
اچ تی ام ال:
کد:
<ul class="tabs">
<li class="active">علی</li>
<li>تقی</li>
<li>نقی</li>
</ul>
<ul class="tab-content">
<li class="active">محتویت تب علی</li>
<li>محتویات تب تقی</li>
<li>محتویات تب نقی</li>
</ul>
سی اس اس:
کد:
.tab-content li:not(.active) {
display: none;
}
.active {
border: 1px solid;
}
جی کویری:
کد:
$(function(){
$('.tabs li').click(function(){
$(this).addClass('active').siblings().removeClass('active');
$('.tab-content li').eq($(this).index()).addClass('active').siblings().removeClass('active');
});
});
دمو: https://jsfiddle.net/sabeti05/rkxy182d/
حالا شاید خود بوت استراپ تابع آمادهای برای این کار داشته باشه، من با بوت استراپ کار نکردم.