Весь 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.