На странице находится на данный момент 3 контейнера с табами. Делаю что-то на подобие компоненты bootstrap стандарты фирмы одним словом. Но возникла проблема во всех первых табов каждого контейнера показывает только контент таба первого контейнера. консоль проверял, скрипт коментировал, проблема где-то в html, id может не так задал. в пятницу весь день мучился. помогите.
первый контейнер с табами:
<div class="col-sm-12">
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#htmlHorizontal" aria-controls="htmlHorizontal" role="tab" data-toggle="tab">HTML</a></li>
<li role="presentation"><a href="#cssHorizontal" aria-controls="cssHorizontal" role="tab" data-toggle="tab">CSS</a></li>
<li role="presentation"><a href="#jsHorizontal" aria-controls="jsHorizontal" role="tab" data-toggle="tab">JS</a></li>
<li role="presentation"><a href="#embededHorizontal" aria-controls="embededHorizontal" role="tab" data-toggle="tab">EMBEDED</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="htmlHorizontal">
<pre>
<code class="line-numbers language-html whitespace-normalization" tabindex="-1">
<div class="mbui-horizontal-form">
lorem ipsum 1
</div>
</code>
</pre>
</div>
</div>
</div>
</div>
второй контейнер с табами:
<div class="col-sm-12">
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#htmlVertical" aria-controls="htmlVertical" role="tab" data-toggle="tab">HTML</a></li>
<li role="presentation"><a href="#cssVertical" aria-controls="cssVertical" role="tab" data-toggle="tab">CSS</a></li>
<li role="presentation"><a href="#jsVertical" aria-controls="jsVertical" role="tab" data-toggle="tab">JS</a></li>
<li role="presentation"><a href="#embededVertical" aria-controls="embededVertical" role="tab" data-toggle="tab">EMBEDED</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="htmlVertical">
<pre>
<code class="line-numbers language-html whitespace-normalization" tabindex="0">
<div class="mbui-vertical-form">
lorem ipsum 2
</div>
</code>
</pre>
</div>
</div>
</div>
</div>
как уже сказал выше во втором контейнере в первом табе показывает из первого контейнера первого таба почему-то.
ссылка на оригиналную страницу: http://mooryazilim.com/mbui/mbui.html