Есть "табы" с якорями, которые отправляются в ссылку. Реализованно, спасибо большое за это пользователю данного форума так:
// Обнаружение ссылки якоря для таба
let url = location.href.split('#')[1], el = $('#'+url);
if(el.length > 0 && el.closest('.tabs-block').length > 0) {
let parent = el.closest('.tabs-block');
//
parent.find('.item.--active').removeClass('--active');
parent.find('.tabs .item[href="'+url+'"]').addClass('--active');
parent.find('.content #'+url).addClass('--active');
}
// Переключение табов
$('.tabs-block .tabs').on('click', '.item', function(){
if(!$(this).hasClass('--active')) {
let parent = $(this).closest('.tabs-block'),
id = $(this).attr('href').split('#')[1];
//
parent.find('.item.--active').removeClass('--active');
parent.find('.content #'+id).addClass('--active');
$(this).addClass('--active');
}
});
.tabs-block {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
width: 100%;
}
.tabs-block .tabs {
display: flex;
flex-direction: column;
max-width: 325px;
margin-right: 30px;
}
.tabs-block .tabs .item {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
color: #000;
font-weight: 600;
font-size: 16px;
line-height: 1.25;
text-decoration: none !important;
padding-right: 35px;
box-sizing: border-box;
opacity: .5;
transition: all .3s;
position: relative;
cursor: pointer;
}
.tabs-block .tabs .item > span:nth-child(1) {
margin-right: 15px;
}
.tabs-block .tabs .item > span:nth-child(2) {
transition: inherit;
}
.tabs-block .tabs .item::after {
content: '';
display: block;
width: 13px;
height: 13px;
background: url('//mir-architects.ru/html/icons/arrow-link.svg') no-repeat center center / 100% auto;
position: absolute;
top: 50%;
right: 0;
transform: scaleX(-1) translateY(-100%);
transition: inherit;
}
.tabs-block .tabs .item:hover {
opacity: 1;
}
.tabs-block .tabs .item:hover > span:nth-child(2) {
color: #e2bc52;
}
.tabs-block .tabs .item:hover::after {
background-image: url('//mir-architects.ru/html/icons/arrow-link-hover.svg');
transform: scaleX(-1) translateY(-100%) translateX(5px);
}
.tabs-block .tabs .item.--active {
opacity: 1;
}
.tabs-block .tabs .item:not(:last-child) {
margin-bottom: 33px;
}
.tabs-block .content {
display: block;
max-width: 827px;
width: 100%;
}
.tabs-block .content .item {
display: none;
}
.tabs-block .content .item.--active {
display: block;
}
@media (max-width: 900px) {
.tabs-block .tabs .item:not(:last-child) {
margin-bottom: 10px;
}
}
@media (max-width: 700px) {
.tabs-block {
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
.tabs-block .tabs {
width: 100%;
max-width: none;
margin-right: 0;
margin-bottom: 30px;
}
.tabs-block .content {
max-width: none;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabs-block">
<div class="tabs">
<a href="#service1" class="item --active" rel="nofollow">
<span>01</span>
<span>Инженерно-геодезические изыскания</span>
</a>
<a href="#service2" class="item" rel="nofollow">
<span>02</span>
<span>Инженерно-геологические изыскания</span>
</a>
<a href="#service3" class="item" rel="nofollow">
<span>03</span>
<span>Инженерно-экологические изыскания</span>
</a>
<a href="#service4" class="item" rel="nofollow">
<span>04</span>
<span>Инженерно-гидрометеорологические изыскания</span>
</a>
<a href="#service5" class="item" rel="nofollow">
<span>05</span>
<span>Обследование зданий и сооружений</span>
</a>
<a href="#service6" class="item" rel="nofollow">
<span>06</span>
<span>Прохождение гос. и не гос. экспертизы</span>
</a>
<a href="#service7" class="item" rel="nofollow">
<span>07</span>
<span>Разработка проектной и рабочей документации</span>
</a>
<a href="#service8" class="item" rel="nofollow">
<span>08</span>
<span>Согласование проектов во всех заинтересованных инстанциях</span>
</a>
<a href="#service9" class="item" rel="nofollow">
<span>09</span>
<span>Сбор исходно-разрешительной документации</span>
</a>
</div>
<div class="content">
<div id="service1" class="item --active">Содержимое 01</div>
<div id="service2" class="item">Содержимое 02</div>
<div id="service3" class="item">Содержимое 03</div>
<div id="service4" class="item">Содержимое 04</div>
<div id="service5" class="item">Содержимое 05</div>
<div id="service6" class="item">Содержимое 06</div>
<div id="service7" class="item">Содержимое 07</div>
<div id="service8" class="item">Содержимое 08</div>
<div id="service9" class="item">Содержимое 09</div>
</div>
</div>
Но есть маленький косячок, при нажатии на ссылки страница "прыгает" к якорю. Можно ли как-то отключить прыжок к якорю, но при этом без вреда для основного функционала, а именно отправки якоря в ссылку?