Сделайте div в ссылку

Question

У меня есть блок <div> с каким-то необычным визуальным контентом, который я не хочу менять. Я хочу сделать ссылку кликабельной.

Я ищу что-то вроде <a href="…"><div> … </div></a>, но это действительно XHTML 1.1.

Answer 1

почему бы и нет? use <a href="bla"> <div></div> </a> отлично работает в HTML5

Answer 2

Это сообщение является старым, я знаю, но мне просто пришлось решить ту же проблему, потому что простое написание обычного тега ссылки с установленным блоком отображения не делает весь div активируемым в IE. поэтому решить эту проблему гораздо проще, чем использовать JQuery.

Во-первых, давайте поймем, почему это происходит: IE не будет делать клик пустым div, он только сделает текст / изображение внутри тега div / a кликабельным.

Решение: Заполните div изображением фона и скройте его от зрителя.

Как? Вы задаете хорошие вопросы, теперь слушайте. добавить этот фоновый стиль к тегу

> "background:url('some_small_image_path')
> -2000px -2000px no-repeat;"

И у вас есть все, теперь div теперь кликабелен. Это был лучший способ для меня, потому что я использую его для своей Фотогалереи, чтобы позволить пользователю кликнуть на одной половине изображения, чтобы он двигался влево / вправо, а затем поместил маленькое изображение также для визуальных эффектов. так что для меня я все равно использовал левое и правое изображения в качестве фоновых изображений!

Answer 3

Этот пример работал для меня:

<div style="position: relative; width:191px; height:83px;">
    <a href="link.php" style="display:block; width:100%; height:100%;"></a>
</div>

Answer 4

Просто поместите ссылку в блок и улучшите ее с помощью jquery. Это ухудшается на 100% изящно для тех, кто не имеет JavaScript. Делать это с помощью html на самом деле не лучшее решение imho. Например:

<div id="div_link">
<h2><a href="mylink.htm">The Link and Headline</a></h2>
<p>Some more stuff and maybe another <a href="mylink.htm">link</a>.</p>
</div>

Затем используйте jquery, чтобы сделать блок кликабельным (через стена веб-дизайнера ):

$(document).ready(function(){

    $("#div_link").click(function(){
      window.location=$(this).find("a").attr("href"); return false;
    });

});

Затем все, что вам нужно сделать, это добавить стили курсора в div

    #div_link:hover {cursor: pointer;}

Для бонусных баллов применяйте эти стили только в том случае, если javascript включен путем добавления класса 'js_enabled' в div, в тело или в другое место.

Answer 5

Это сработало для меня:

HTML:

<div>

  WHATEVER YOU WANT

  <a href="YOUR LINK HERE">
    <span class="span-link"></span>
  </a>

</div>

CSS:

.span-link {
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left: 0;
  z-index: 9999;
}

Это добавляет невидимый элемент (span), который покрывает весь ваш div, и на выше весь ваш div по z-index, поэтому, когда кто-то нажимает на этот div, щелчок по существу перехватывается вашим невидимым слоем span, который связан.

Примечание. Если вы уже используете z-индексы для других элементов, просто убедитесь, что значение этого z-индекса больше, чем все, что вы хотите, чтобы он оставался "поверх".

Answer 6

<a href="…" style="cursor: pointer;"><div> … </div></a>

Answer 7

На самом деле вам нужно включить код JavaScript на данный момент, отметьте этот урок , чтобы сделать это.

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

display:block;

когда вы это сделаете, это сделает кликабельным всю область ширины (но в пределах высоты тега привязки), если вы хотите покрыть всю область div, вы должны установить высоту тега привязки точно в высота тега div, например:

height:60px;

это сделает всю область кликабельной, тогда вы можете применить text-indent:-9999px к тегу привязки для достижения цели.

это действительно сложно и просто, и оно просто создано с использованием кода CSS.

Вот пример : http://jsfiddle.net/hbirjand/RG8wW/

Answer 8

Я вытащил переменную, потому что некоторые значения в моей ссылке будут меняться в зависимости от того, из какой записи пришел пользователь. Это сработало для тестирования:

   <div onclick="location.href='page.html';"  style="cursor:pointer;">...</div> 

и это тоже работает:

   <div onclick="location.href='<%=Webpage%>';"  style="cursor:pointer;">...</div> 

Answer 9

Хотя я не рекомендую делать это ни при каких обстоятельствах, вот код, который превращает DIV в ссылку (примечание: в этом примере используется jQuery, а некоторая разметка удалена для простоты):

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
    $("div[href]").click(function () {
        window.location = $(this).attr("href");
    });
});

</script>
<div href="http://www.google.com">
     My Div Link
</div>

Еще раз, я бы не стал этого делать, поэтому, пожалуйста, не голосуйте за меня. Я просто пытаюсь ответить на вопрос.

Answer 10

Это лучший способ сделать это, как используется на сайте BBC и в Guardian:

Я нашел технику здесь: http://codepen.io/IschaGast/pen/Qjxpxo

вот HTML

<div class="highlight block-link">
      <h2>I am an example header</h2>
      <p><a href="pageone" class="block-link__overlay-link">This entire box</a> links somewhere, thanks to faux block links. I am some example text with a <a href="pagetwo">custom link</a> that sits within the block</p>

</div>

вот CSS

/**
 * Block Link
 *
 * A Faux block-level link. Used for when you need a block-level link with
 * clickable areas within it as directly nesting a tags breaks things.
 */


.block-link {
    position: relative;
}

.block-link a {
  position: relative;
  z-index: 1;
}

.block-link .block-link__overlay-link {
    position: static;
    &:before {
      bottom: 0;
      content: "";
      left: 0;
      overflow: hidden;
      position: absolute;
      right: 0;
      top: 0;
      white-space: nowrap;
      z-index: 0;
    }
    &:hover,
    &:focus {
      &:before {
        background: rgba(255,255,0, .2);
      }
    }
}