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

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

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

ОТВЕТЫ

Ответ 1

Пришел сюда в надежде найти лучшее решение, чем мое, но мне не нравится ни одно из предлагаемых здесь. Я думаю, что некоторые из вас неправильно поняли вопрос. ОП хочет, чтобы div, наполненный контентом, вел себя как ссылка. Одним из примеров этого могут быть объявления на Facebook - если вы посмотрите, они на самом деле правильная разметка.

Для меня нет-nos: javascript (не нужно просто для ссылки и очень плохая SEO/доступность); неверный HTML.

По сути это так:

  • Создайте свою панель, используя обычные методы CSS и действительный HTML.
  • Где-то там есть ссылка, которую вы хотите использовать по умолчанию, если пользователь нажимает на панель (у вас могут быть и другие ссылки).
  • Внутри этой ссылки поместите пустой тег span (<span></span>, а не <span/> - спасибо @Campey)
  • указать положение панели: относительно

  • примените следующий CSS к пустому диапазону:

    { 
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;

  z-index: 1;

  /* fixes overlap error in IE7/8, 
     make sure you have an empty gif */
  background-image: url('empty.gif');
}

    Теперь она будет закрывать панель, и, поскольку она находится внутри тега <A>, она является кликабельной ссылкой.

  • задайте любые другие ссылки внутри позиции панели: относительный и подходящий z-индекс (> 1), чтобы привести их перед стандартной связью промежутка.

Ответ 2

Вы не можете сделать ссылку div самой, но вы можете сделать тег <a> действующим как block, то же поведение a <div> имеет.

a {
    display: block;
}

Затем вы можете установить на нем ширину и высоту.

Ответ 3

Это древний вопрос, но я думал, что отвечу на него, так как у всех здесь есть сумасшедшие решения. Это на самом деле очень просто...

Якорный тег работает следующим образом:

<a href="whatever you want"> EVERYTHING IN HERE TURNS INTO A LINK </a>

Тааак...

<a href="whatever you want"> <div id="thediv" /> </a>

Хотя я не уверен, что это действительно так. Если это рассуждение за устными решениями, то я прошу прощения...

Ответ 4

Требуется небольшой javascript. Но ваш div будет доступен для кликов.

<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>

Ответ 5

Этот параметр не требует пустого_имя, как и в самом верхнем ответе:

HTML:

 <div class="feature">
       <a href="http://www.example.com"></a>
 </div>

CSS

 div.feature {
        position: relative;
    }

    div.feature a {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-decoration: none; /* No underlines on the link */
        z-index: 10; /* Places the link above everything else in the div */
        background-color: #FFF; /* Fix to make div clickable in IE */
        opacity: 0; /* Fix to make div clickable in IE */
        filter: alpha(opacity=1); /* Fix to make div clickable in IE */
    }

Как предлагается на http://www.digitalskydesign.com/how-to-make-an-entire-div-a-link-using-css/

Ответ 6

Это "действительное" решение для достижения того, что вы хотите.

<style type="text/css">
.myspan {
    display: block;
}
</style>
<a href="#"><span class="myspan">text</span></a>

Но наиболее вероятно, что вы действительно хотите иметь тег <a>, отображаемый как элемент уровня блока.

Я бы не советовал использовать JavaScript для имитации гиперссылки, поскольку это побеждает цель проверки разметки, что в конечном итоге способствует доступности (публикация хорошо сформированных документов по правильным семантическим правилам минимизирует возможность того, что один и тот же документ будет интерпретироваться по-разному разными браузеры).

Было бы предпочтительнее публиковать веб-страницу, которая не проверяет, но корректно отображает и функционирует во всех браузерах, в том числе с отключенным JavaScript. Кроме того, использование onclick не предоставляет семантической информации для устройства чтения с экрана, чтобы определить, что div работает как ссылка.

Ответ 7

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

Код:

<div style='position:relative;background-color:#000000;width:600px;height:30px;border:solid;'>
  <p style='display:inline;color:#ffffff;float:left;'> Whatever </p>     
  <a style='position:absolute;top:0px;left:0px;width:100%;height:100%;display:inline;' href ='#'></a>
</div>

Ответ 8

Самый простой способ - использовать jQuery с тегами данных, введенными в HTML. С помощью этого решения вы можете создать ссылку на любой тег, который вы хотите. Сначала определите тег (например, div) с тегом data-link:

<div data-link="http://www.google.at/">Some content in the div which is arbitrary</div>

Теперь вы можете стилизовать div так, как хотите. И вы должны также создать стиль для поведения "ссылка" -alike:

[data-link] {
  cursor: pointer;
}

И наконец поместите этот вызов jQuery на страницу:

$(document).ready(function() {
  $("[data-link]").click(function() {
    window.location.href = $(this).attr("data-link");
    return false;
  });
});

С помощью этого кода jQuery применяет прослушиватель кликов к каждому тегу на странице, который имеет атрибут "data-link", и перенаправляет на URL-адрес, который находится в атрибуте data-link.

Ответ 9

Чтобы заставить ответ отвечать в IE 7 и переходить, ему нужно несколько настроек.

  • IE не будет соблюдать z-index, если элемент не имеет фонового цвета, поэтому ссылка не будет перекрывать части содержащего div, содержащего контент, только пустые части. Чтобы исправить это, добавлен фон с непрозрачностью 0.

  • По какой-то причине IE7 и различные режимы совместимости полностью сбой при использовании диапазона в подходе к ссылке. Однако, если сама ссылка дана в стиле, она отлично работает.

.blockLink  
{  
    position:absolute;  
    top:0;  
    left: 0;  
    width:100%;  
    height:100%;  
    z-index: 1;  
    background-color:#ffffff;   
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  
    filter: alpha(opacity=0);  
    opacity:0;  
}

<div style="position:relative">  
    <some content>  
    <a href="somepage" class="blockLink" />  
<div>

Ответ 10

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

<div id="css_ID">
    <a href="http://www.your_link.com" style="display:block; height:100%; width:100%;"></a>
</div>

Ответ 11

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

Ответ 12

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

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

Решение. Заполните div с помощью изображения bakground и спрячьте его от зрителя.

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

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

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

Ответ 13

Просто добавьте ссылку в блок и улучшите ее с помощью 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 или тело или что-то еще.

Ответ 14

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

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

Ответ 15

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

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-индекса больше, чем все, что вы хотите, чтобы оно оставалось "поверх".

Ответ 16

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

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

display:block;

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

height:60px;

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

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

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

Ответ 17

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

Ответ 18

Хотя я не рекомендую делать это ни при каких обстоятельствах, вот некоторый код, который превращает 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>

Ответ 19

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

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

Ответ 20

Это самый простой способ.

Скажем, это блок div, который я хочу сделать интерактивным:

<div class="inner_headL"></div>

Итак, поместите a href следующим образом:

<a href="#">
 <div class="inner_headL"></div>
</a>

Просто рассмотрите блок div как обычный элемент html и включите обычный тег href.
Он работает по крайней мере на FF.

Ответ 21

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

<div class="boxdiv" onClick="window.location.href='https://www.google.co.in/'">google</div>
<style type="text/css">
.boxdiv {
    cursor:pointer;
    width:200px;
    height:200px;
    background-color:#FF0000;
    color:#fff;
    text-align:center;
    font:13px/17px Arial, Helvetica, sans-serif;
    }
</style>

Ответ 22

Вы можете окружить элемент тегами href или использовать jquery и использовать

$('').click(function(e){
e.preventDefault();
//DO SOMETHING
});

Ответ 23

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

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

heres 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>

heres 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);
      }
    }
}

Ответ 24

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

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

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

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

Ответ 25

Мои умные штаны отвечают:

"Уклончивый ответ на вопрос:" Как сделать элемент уровня блока гиперссылкой и проверить в XHTML 1.1 "

Просто используйте HTML5 DOCTYPE DTD.

На самом деле не верно для ie7

onclick="location.href='page.html';"

Работает с IE7-9, Chrome, Safari, Firefox,

Ответ 26

если просто все может быть таким простым...

#logo {background:url(../global_images/csg-4b15a4b83d966.png) no-repeat top left;background-position:0 -825px;float:left;height:48px;position:relative;width:112px}

#logo a {padding-top:48px; display:block;}



<div id="logo"><a href="../../index.html"></a></div>

просто подумайте немного за пределами коробки; -)