Vaska,
можно создать одну функцию для всех кнопок
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
li.active{
background-color: #FFD700;
}
.tab{
display: none;
}
.tab.active{
display: block;
height: 70px;
border-radius: 24px;
border: 4px solid #A9A9A9;
padding: 4px;
}
ul{
border: 1px solid #8B4513;
list-style: none;
height: 300px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
var menu = $('.tab-lists');
var tabs = $('.tab');
menu.on('click', 'li', function(event) {
event.preventDefault();
var index = $(this).prevAll('li').length;
showTab(index);
})
function showTab(index)
{
$('li', menu).removeClass('active').filter(`:nth-child(${index + 1})`).addClass('active');
var tab = tabs.removeClass('active').eq(index).addClass('active');
window.setTimeout(function() {
$('html, body').stop().animate({scrollTop: tab.offset().top - 200}, 1000);
}, 200)
}
});
</script>
</head>
<body>
<ul class="tab-lists">
<li class="active">
<div>
<h3>title 1</h3>
</div>
</li>
<li>
<div>
<h3>title 2</h3>
</div>
</li>
<li>
<div>
<h3>title 3</h3>
</div>
</li>
</ul>
<div class="tab active">
<div class="content bd" >
<div class="dss-goods-info-content">
Содержание вкладки 1
</div>
</div>
</div>
<div class="tab">
<div class="content bd" >
<div class="dss-goods-info-content">
Содержание вкладки 2
</div>
</div>
</div>
<div class="tab">
<div class="content bd" >
<div class="dss-goods-info-content">
Содержание вкладки 3
</div>
</div>
</div>
<ul class="tab-lists">
<li class="active">
<div>
<h3>title 1</h3>
</div>
</li>
<li>
<div>
<h3>title 2</h3>
</div>
</li>
<li>
<div>
<h3>title 3</h3>
</div>
</li>
</ul>
<ul class="tab-lists">
<li class="active">
<div>
<h3>title 1</h3>
</div>
</li>
<li>
<div>
<h3>title 2</h3>
</div>
</li>
<li>
<div>
<h3>title 3</h3>
</div>
</li>
</ul>
<ul class="tab-lists">
<li class="active">
<div>
<h3>title 1</h3>
</div>
</li>
<li>
<div>
<h3>title 2</h3>
</div>
</li>
<li>
<div>
<h3>title 3</h3>
</div>
</li>
</ul>
</body>
</html>