Таким образом, вы можете сделать это, просто добавляя уникальные идентификаторы для ваших нав-вкладок hrefs и вкладки панелей. Идентификаторы должны быть уникальными (что означает один на странице), поэтому, если у вас есть один файл #profile, то затем вам нужно будет сделать его # profile2 или что-то в этом роде. Но если вы не хотите вмешиваться в добавление кучи разных идентификаторов на свою страницу, вы можете вручную добавлять и удалять активные и в классах содержимое вашей вкладки и навигационные вкладки с помощью jquery. Затем вам нужно будет использовать функцию jquerys index(), чтобы найти номер элемента, на который вы нажали, и добавить соответствующие классы в правильную вкладку. Также вы не получите эффект затухания в следующем примере.
Таким образом, вы можете удалить идентификаторы из ваших закладок-панелей и #tabtarget из HREF вашего нав-вкладки и просто использовать следующую разметку:
<ul class="nav nav-tabs">
<li class="active"><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
<li><a href="#">Tab 4</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane in active">
<h3>Tab 1 Tab List 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="tab-pane">
<h3>Tab 2 Tab List 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="tab-pane">
<h3>Tab 3 Tab List 1</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div class="tab-pane">
<h3>Tab 4 Tab List 1</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
<li><a href="#">Tab 4</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane in active">
<h3>Tab 1 Tab List 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="tab-pane">
<h3>Tab 2 Tab List 2</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="tab-pane">
<h3>Tab 3 Tab List 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div class="tab-pane">
<h3>Tab 4 Tab List 2</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
<li><a href="#">Tab 4</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane in active">
<h3>Tab 1 Tab List 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="tab-pane">
<h3>Tab 2 Tab List 3</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="tab-pane">
<h3>Tab 3 Tab List 3</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div class="tab-pane">
<h3>Tab 4 Tab List 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
А затем используйте следующий код JQuery для достижения Вашего желаемый результат:
$(document).ready(function(){
$('.nav-tabs a').click(function(e){
e.preventDefault();
var tabIndex = $('.nav-tabs a').index(this);
$(this).parent().siblings().removeClass("active");
$(this).parent().addClass("active");
$('.tab-pane:eq('+tabIndex+')').siblings().removeClass("in active");
$('.tab-pane:eq('+tabIndex+')').addClass("in active");
});
});
Вот скрипку, чтобы показать вам это в действии Fiddle
это прекрасно! –