Пытаюсь сделать эффект в под меню смена картинок при наведении на пункт, но выдает ошибку
<li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-45">
<a href="#">Услуги</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44 active" data-tab="item-44"><a href="#">1</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43" data-tab="item-43"><a href="#>2</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42" data-tab="item-42"><a href="#">3</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41" data-tab="item-41"><a href="#">4</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73" data-tab="item-73"><a href="#">5</a></li>
<div class="cont active" id="item-44"><img src="https://picsum.photos/536/354" alt=""></div>
<div class="cont" id="item-43"><img src="https://picsum.photos/536/355" alt=""></div>
<div class="cont" id="item-42"><img src="https://picsum.photos/536/356" alt=""></div>
<div class="cont" id="item-41"><img src="https://picsum.photos/536/357" alt=""></div>
<div class="cont" id="item-73"><img src="https://picsum.photos/536/358" alt=""></div>
</ul>
</li>
#menu-item-45 {
display: flex;
}
.cont {
display: none;
}
.cont.active {
display: block;
}
.cont img {
width: 155px;
}
ul.sub-menu {
list-style: none;
}
ul.sub-menu li {
border-bottom: 1px solid #f1f1f1; padding: 12px 20px;
}
ul.sub-menu li a {
color: #636363; text-decoration: none;
}
ul.sub-menu li.active a {
font-weight: bold; color: #000;
}
ul.sub-menu li:last-child {
border: 0;
}
jQuery(document).ready(function () {
jQuery('ul.sub-menu li').hover(function () {
var tab_id = jQuery(this).attr('data-tab');
jQuery('ul.sub-menu li').removeClass('active');
jQuery('.cont').removeClass('active');
jQuery(this).addClass('active');
jQuery("#" + tab_id).addClass('active');
})
})
