Делаю переключатель между табами (слайдами) через css. То есть, скрываю видимость input, задаю нужные стили label. Кликаю на него, и через селектор открывается нужный экран (вот так):
input {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
white-space: nowrap;
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(100%);
}
label {
position: absolute;
display: flex;
width: 100%;
height: 100%;
z-index: 10;
cursor: pointer;
&:hover {
h3 {
color: $blue;
}
}
}
.tabs-section--neurology,
.tabs-section--massage,
.tabs-section--rheumatology {
display: none;
}
#neurology-button:checked ~ .tabs-section--neurology,
#massage-button:checked ~ .tabs-section--massage,
#rheumatology-button:checked ~ .tabs-section--rheumatology {
display: flex;
}
При клике по label, фокус резко переносит пользователя на него. Если label и контент находятся в разных местах, то это сильно мешает, т.к. пользователь хочет посмотреть контент, а его буквально отрывает от контента к лейблу. Есть ли способ это исправить?