Ссылка href для всего div в HTML/CSS

Ответ 1

ОБНОВЛЕНИЕ 06/10/2014: использование div внутри a семантически корректно в HTML5.

Вам нужно выбрать один из следующих сценариев:

<a href="http://google.com">
    <div>
        Hello world
    </div>
</a>

который семантически некорректен, но он будет работать.

<div style="cursor: pointer;" onclick="window.location='http://google.com';">
    Hello world
</div>

который семантически корректен, но включает в себя использование JS.

<a href="http://google.com">
    <span style="display: block;">
        Hello world
    </span>
</a>

который семантически корректен и работает как ожидалось, но больше не является div.

Ответ 2

Почему бы вам не удалить элемент <div> и заменить его на <a>? Просто потому, что тег привязки не является div, это не значит, что вы не можете стилить его с помощью display:block, высоты, ширины, фона, границы и т.д. Вы можете сделать его похожим на div, но все равно действовать как ссылка, Тогда вы не полагаетесь на неверный код или JavaScript, которые могут быть недоступны для некоторых пользователей.

Ответ 3

Сделайте это так:

Parentdivimage должен иметь указанную ширину и высоту, а его позиция должна быть:

position: relative;

Внутри родительского изображения рядом с другими div, содержащими родительский элемент, вы должны поставить:

<a href="linkt.to.smthn.com"><span class="clickable"></span></a>

Затем в файле css:

.clickable {
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  position: absolute;     
  z-index: 1;
}

Тег span заполнит свой родительский блок, который является parentdiv, из-за высоты и ширины, установленных на 100%. Span будет на вершине всех окружающих элементов из-за установки z-индекса выше, чем другие элементы. Наконец, диапазон будет кликабельным, потому что он внутри тега 'a'.

Ответ 4

Две вещи, которые вы можете сделать:

• Измените #childdivimage на элемент span и измените #parentdivimage на тег привязки. Это может потребовать от вас добавить еще несколько стилей, чтобы они выглядели идеально. Это предпочтительнее, поскольку использует семантическую разметку и не полагается на javascript.

• Используйте Javascript для привязки события click к #parentdivimage. Вы должны перенаправить окно браузера, изменив window.location внутри этого события. Это TheEasyWay ^TM но не будет деградировать изящно.

Ответ 5

Отправляясь от того, что сказал Surreal Dreams, лучше всего использовать стиль привязки в моем опыте, но это действительно зависит от того, что вы делаете. Вот пример:

Html:

<div class="parent-div">
  <a href="#">Test</a>
  <a href="#">Test</a>
  <a href="#">Test</a>
</div>

Затем CSS:

.parent-div {
  width: 200px;
}
a {
  display:block;
  background-color: #ccc;
  color: #000;
  text-decoration:none;
  padding:10px;
  margin-bottom:1px;
}
a:hover {
  background-color: #ddd;
}

http://jsbin.com/zijijuduqo/1/edit?html,css,output

Ответ 6

Сделайте div из id="childdivimag" a span и оберните это в элемент a. Поскольку значения span и img являются встроенными элементами по умолчанию, это остается в силе, тогда как div является элементом уровня блока и, следовательно, недействительной разметкой, когда содержится в a.

Ответ 7

поместите display:block в элемент привязки. и/или zoom:1;

но вы просто должны это сделать.

a#parentdivimage{position:relative; width:184px; height:235px; 
                 border:2px solid #000; text-align:center; 
                 background-image:url("myimage.jpg"); 
                 background-position: 50% 50%; 
                 background-repeat:no-repeat; display:block; 
                 text-indent:-9999px}

<a id="parentdivimage">whatever your alt attribute was</a>

Ответ 8

Что бы я сделал, это поместить прогиб в тег <a>, установить диапазон для блокировки и добавить размер к диапазону или просто применить стиль к тегу <a>. Определенно обрабатывайте позиционирование в стиле тегов <a>. Добавьте onclick event в a where JavaScript поймает событие, а затем вернет false в конце события JavaScript, чтобы предотвратить действие по умолчанию href и пузырение щелчка. Это работает в случаях с включенным JavaScript или без него, и любой AJAX может обрабатываться в слушателе Javascript.

Если вы используете jQuery, вы можете использовать это как ваш слушатель и опустить onclick в теге a.

$('#idofdiv').live("click", function(e) {
    //add stuff here
    e.preventDefault; //or use return false
}); 

это позволяет при необходимости подключать слушателей к любым измененным элементам.

Ответ 9

Привет, это можно сделать разными способами. а. Использование вложенных внутри тега.

<a href="link1.html">
   <div> Something in the div </div>
 </a>

б. Использование встроенного метода JavaScript

<div onclick="javascript:window.location.href='link1.html' "> 
  Some Text 
</div>

с. Использование jQuery внутри тега

HTML:

<div class="demo" > Some text here </div>

JQuery:

$(".demo").click( function() {
  window.location.href="link1.html";
 });

Надеюсь, это поможет... Заранее спасибо

Ответ 10

Ссылка с тегами <div>:

<div style="cursor: pointer;" onclick="window.location='http://www.google.com';">
     Something in the div 
</div>

Ссылка с тегами <a>:

<a href="#" onclick="location.href='http://www.google.com'; return false;">
    <div>
        Something in the div 
    </div>
</a>