max1985,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.opaque{
border: 5px solid #FF0000;
}
.active{
border: 5px solid #008000;
}
.tab-pane{
display: none;
}
.tab-pane.active{
display: block;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<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" >
<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>
$(function() {
$(".cf7_controls").on('click', 'li', function() {
var index = $(this).index();
$("#cf7 img").removeClass("opaque").eq(index).addClass("opaque");
$(".cf7_controls li").removeClass("active").eq(index).addClass("active");
$(".tab-pane").removeClass("active").eq(index).addClass("active");
});
});
</script>
</div>
</body>
</html>