| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 6.0+ | 2.0+ | 7.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Задача
Сделать блочный элемент, который целиком является ссылкой на указанную страницу.
Решение
При размещении ссылки внутри слоя заданных размеров, иногда возникает задача, чтобы ссылкой был не только текст, но и сам слой. Особенно это бывает актуально при создании различных меню. Для изменения вида ссылки к селектору A в стилях следует добавить свойство display со значением block , чтобы превратить ссылку в блочный элемент. Такой элемент по умолчанию занимает всю свободную ширину внутри родителя. Также необходимо указать height : 100% , ссылка после этого будет занимать всю доступную высоту внутри слоя (пример 1).
Пример 1. Ссылка внутри слоя
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат примера показан на рис. 1. Обратите внимание, что курсор мыши превращается в указатель внутри слоя целиком, а не только на тексте, как это происходит с обычными ссылками.
Блок div как ссылка, как сделать div ссылкой такого рода вопросы как оказалось очень часто ищут, но не могут найти. Этот маленький урок предназначен для тех кто искал искал, но не нашел. Решение как всегда оказалось очень простым, для этого достаточно добавить событие onclick прописать location.href и добавить ссылку.
8 комментариев на «“Блок div как ссылка”»
Не работает Ваша конструкция, Вы ее проверяли перед публикацией?
Я не знаю как у Вас работает? Пробовал два варианта:
1)
Мой заголовок
И ничего не работает Мой заголовок не становится ссылкой…
Сергей, Вы меня извините что я так Вас достаю просто уже дело принципа докопаться до истины. Вот это
Украинский борщ со свеклой
у меня как не работало так и не работает….По-поводу Вашей ссылки на рабочий пример…я вообще не пойму что я должен извлечь из этого? Вы мне объясните помимо конструкции
Мой заголовок
я должен еще применять какой то код или должно работать и так?
Ваша код работает, что вам не понятно?
Украинский борщ со свеклой
Чтобы убедиться, что все работает создайте файл с расширением Html и добавьте следующий код
ссылку на сайт можно?
У вас в коде ошибка. Проверьте все ковычки!
Как по уму сделать див ссылкой?
В моем случае я покрываю весь див прозрачным слоем . Это вообще корректно? А если в этом блоке "про.
- Вопрос задан более трёх лет назад
- 1870 просмотров
Может быть принято за кликджекинг.
Сделайте так:
минусы:
1. Не индексируется ПС, ну или как минимум плохо индексируется.
2. Не сохраняет в истории страниц текущую страницу. Чтобы работала кнопка "назад" в браузере, нужно усложнить js-код.
Внутренюю ссылку размещаем так:
Андрей Федоров, "Если мне не нравится, что купленный батон хлеба криво испечен — надо встать у конвейера на хлебзаводе? У DVD хреновые мастеринг и печать — устроиться на завод специалистом по репликации? Если хирург дерьмово провел операцию — взять скальпель и поковыряться в себе самостоятельно?" (с) Номад.
А вообще коммент год назад дан. Забудьте о всяких onmousedown и onclick, выносите все скрипты в отдельный js-файл в листенеры.
В примере нужно просто обернуть дивку в тег
