Весь div как ссылка?
Я хочу использовать весь div как ссылку.. без использования "onclick"
Возможно ли это с помощью простого href
?
Спасибо
Ответы
Ответ 1
Нет, div
элементы не могут иметь атрибут href
, и они не будут действовать как ссылки. Вы можете использовать следующее в HTML5:
<a href="#"><div></div></a>
Однако не все браузеры текущего поколения (особенно Firefox 3.6) поддерживают это. Другой альтернативой является добавление абсолютно позиционированного элемента a
, который имеет 100% ширину и высоту в div
:
div a {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
Это действительный HTML4, но он не будет работать в более старых версиях IE, конечно. В противном случае вы должны выполнить то, что хотите. См.: http://www.jsfiddle.net/uRh7j/
Ответ 2
вы не можете. но вы можете использовать <a>
с style="display:block"
, который должен вести себя точно так же, как <div>
, чтобы заменить ваш <div>
Ответ 3
простой ответ - нет, вы можете использовать onclick
с css cursor:pointer
, чтобы получить ту же функциональность.
Ответ 4
В спецификации HTML (HTML 4.01, Draft 5 и XHTML 1,1.1) тег привязки <a>
не может заключить тег <div>
.
Ответ 5
Оберните вокруг себя якорь.
<a href="#"><div></div></a>
Ответ 6
Я не думаю, что это возможно без использования события onclick. Вы можете использовать display:block;
для отображения ссылки как div, но ничего больше.
Ответ 7
почему бы вам не использовать javascript framework, такую как jquery, пусть div не имеет события onclick, но объявляет событие в jquery, например:
<script>
$(function(){
$(".click").click(function{ alert('clicked!'); });
});
</script>
<div class="click"></div>
только мои 2 цента. спасибо.
Ответ 8
Вы можете сделать это, создав небольшой прозрачный PNG (скажем, 10px * 10px) и используя CSS, чтобы установить ширину и высоту PNG на 100%. Затем вы можете обернуть тег img
тегом a href
.
Здесь HTML:
<div id="YourHeader">
<a href="#" onclick="location.href='http://example.com'; return false;"><img src="/path/to/header10x10.png" /></a>
</div>
Здесь CSS:
#YourHeader img {
width: 100%;
height: 100%;
}
Это особенно удобно, если #YourHeader
- это пустой div
, целью которого является отображение изображения заголовка через его атрибут background-image
.