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

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

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

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

Для меня нет-это: 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), чтобы привести их перед стандартной связью промежутка.

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

a {
    display: block;
}

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

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

Якорный тег работает так:

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

Тааак ...

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

Хотя я не уверен, действительно ли это. Если это обоснование устных решений, то я прошу прощения ...

Требуется немного JavaScript. Но ваш divбудет кликабельным.

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

Эта опция не требует empty.gif, как в ответе с наибольшим количеством голосов:

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/

Это «правильное» решение для достижения того, что вы хотите.

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

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

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

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

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

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

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

[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.

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

Код :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

display:block;

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

height:60px;

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

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

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

Это лучший способ сделать это, как используется на сайте 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);
      }
    }
}

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

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

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

Вы можете дать ссылку на ваш 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>

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

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

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

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

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

Так вставьте hrefследующее:

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

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

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

Опция, которая не была упомянута, использует flex. Применяя flex: 1к aтегу, он расширяется, чтобы соответствовать контейнеру.

div {
  height: 100px;
  width: 100px;
  display: flex;
  border: 1px solid;
}

a {
  flex: 1;
}

<div>
  <a href="http://google.co.uk">Link</a>
</div>

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

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

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

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

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

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

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

На самом деле не относится к ie7

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

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

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

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

просто подумай немного нестандартно ;-)