2

Как при нажатии по HTML-блоку перейти на другую страницу? Не используя тег <a>.

1
  • 4
    А что мешает сделать ссылку тегом a?
    – andreymal
    22 окт 2018 в 10:54

4 ответа 4

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>
1
  • а что должно произойти по клику? У меня 404 ошибка)
    – pavel
    22 окт 2018 в 11:48
3

Делать ссылки на 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>

1

По клику, например.

$('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';
};
5
  • этот способ не работает в некоторых браузерах. Например firefox. Нужно использовать фейковый "а" вместо.
    – nick_n_a
    22 окт 2018 в 11:03
  • @nick_n_a неправда, в Firefox работает
    – andreymal
    22 окт 2018 в 11:04
  • @nick_n_a не может быть. везде работает 22 окт 2018 в 11:04
  • @nick_n_a обновил ответ 22 окт 2018 в 11:06
  • @nick_n_a, что конкретно может не работать в ff? изменение location?
    – Grundy
    22 окт 2018 в 11:25
1

Добавьте блоку событие onClick="window.location.href='', в href добавьте адрес ссылки

8

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.