(Вы можете увидеть полный код здесь: Codepen )
Вопрос:
Почему, когда вы нажимаете навигационную ссылку, она прокручивается до верхней части изображения? и как это предотвратить?
Ответ:
Ну, это естественное поведение ссылки. это называется якорной ссылкой.
если вы используете <a href="#slide1">, когда пользователь нажимает на него, страница прокручивается до элемента с id = slide1.
Вы можете предотвратить это (добавив onclick="event.preventDefault()"), но это означает, что вы больше не можете использовать правило css :target. это означает, что целевое изображение больше не будет отображаться поверх других изображений.
Вместо этого вы можете использовать JavaScript, чтобы контролировать полное поведение.
- Добавьте обработчик onclick к ссылкам навигации:
<a href="#slide1" onclick='navigate(event)'>
- Вы должны написать функцию навигации по JavaScript. эта функция должна дать класс
active из текущего элемента active и присвоить его нажатому. как это:
function navigate(event){
//get active element
var active = event.target.closest(".wrapper").getElementsByClassName("active")[0];
//remove class "active" from active element
if(active)active.classList.remove("active");
//get target element from link
var target = document.getElementById(event.target.closest("a").getAttribute("href").replace("#",""));
//add class "active" to the target
target.classList.add("active");
//prevent default link behaviour
event.preventDefault();
}
- тогда мы должны написать правило css для активного изображения (оно заменено селектором
li:target.):
.slides li.active {
z-index: 3;
}
.slides li:not(.active) {
z-index: 0;
}
(Вы можете увидеть полный код здесь: Codepen )