Как при нажатии по HTML
-блоку перейти на другую страницу? Не используя тег <a>
.
4 ответа
Ну из div
ссылку вы сделать не сможете, но можно привязать onclick
к нужному блоку и делать переход как по ссылке следующим образом:
<div onclick="location.href='http://yoursite.com';">Content</div>
Пример:
div {
height: 200px;
width: 200px;
outline: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
}
div:hover {
outline: 2px solid black;
cursor: pointer;
}
<div onclick="location.href='https://ru.stackoverflow.com';">Redirect to another site</div>
Если у вас не срабатывает корректно onClick
в некоторых браузерах, то добавьте javascript:
:
<div onclick="javascript:location.href='http://yoursite.com';">Content</div>
Делать ссылки на JS - это уже неправильный семантический подход. Ссылки должны индексироваться и быть доступны скринридерами. Да и зачем усложнять жизнь с джаваскриптом, когда есть возможность реализации на нативном HTML.
Делай так:
.block {
display: block;
}
<a href='#' class='block'>
<div class='block__content'>Контент</div>
</a>
Но так как ссылка - строчный элемент, внутри него неправильно всовывать блочные элементы. Поэтому лучше сделать ссылку элементом блока, и потом натянуть ее поверх остального содержимого блока:
.block {
position: relative;
z-index: 0;
}
.block__link {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
<div class='block'>
<div class='block__content'>Контент</div>
<a href='#' class='block__ghostLink'>Ссылка</a>
</div>
По клику, например.
$('div#go_to_yandex').on('click', function(event) {
window.location.href = 'https://ya.ru';
});
или без Query:
document.getElementById('go_to_yandex').onclick = function(event) {
window.location.href = 'https://ya.ru';
};
-
этот способ не работает в некоторых браузерах. Например firefox. Нужно использовать фейковый "а" вместо.– nick_n_a22 окт 2018 в 11:03
-
-
-
-
Добавьте блоку событие onClick="window.location.href=''
, в href
добавьте адрес ссылки