Здравствуйте!
Помогите допилить вкладки сделанные на бутстрап 3
Сейчас код выглядит так:
<div class="row techno-description" role="tabpanel" id="myTab">
<div id="cf7" class="shadow">
<img class="opaque" src="/img/bg/111.png" />
<img src="/img/bg/222.png" />
<img src="/img/bg/333.png" />
</div>
<ul class="nav nav-tabs techno-menu cf7_controls" id="guide-tabs">
<li class="active" id="selected">
<a class="first" data-toggle="tab" href="#1">111</a>
</li>
<li>
<a class="first" data-toggle="tab" href="#2">222</a>
</li>
<li>
<a class="first" data-toggle="tab" href="#3">333</a>
</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="1">
<div class="row">
<div class="col-md-3 img-box">
111
</div>
<div class="col-md-9 text-box">
<p>Описание 111</p>
<div class="descr"><a data-toggle="tab" href="#2"><img src="/img/compl/pr3.png" /></a></div>
</div>
</div>
</div>
<div class="tab-pane" id="2">
<div class="row">
<div class="col-md-3 img-box">
222
</div>
<div class="col-md-9 text-box">
<div class="row">
<p>Описание 222</p>
<div class="descr"><a data-toggle="tab" href="#3"><img src="/img/compl/pr3.png" /></a></div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="3">
<div class="row">
<div class="col-md-3 img-box">
333
</div>
<div class="col-md-9 text-box">
<p>Описание 333</p>
<div class="descr"><a data-toggle="tab" href="#4"><img src="/img/compl/pr3.png" /></a></div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$(".cf7_controls").on('click', 'li', function() {
$("#cf7 img").removeClass("opaque");
var newImage = $(this).index();
$("#cf7 img").eq(newImage).addClass("opaque");
$(".cf7_controls li").removeId("selected");
$(this).addId("selected");
});
});
</script>
</div>
Сейчас при переходе по такой ссылке внутри вкладки
<div class="descr"><a data-toggle="tab" href="#4"><img src="/img/compl/pr3.png" /></a></div>
содержимое вкладки открывается, а сам таб не меняется.
Подскажите чего не хватает?
Спасибо!