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

Question

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

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

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

Answer 2

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

a {
    display: block;
}

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

Answer 3

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

Тег привязки работает следующим образом -

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

Тааак ...

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

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

Answer 4

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

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

Answer 5

Для этой опции не требуется 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/

Answer 6

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

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

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

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

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

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

Answer 8

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

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

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

CSS:
-------------
[data-link] {
    cursor: pointer;
}

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

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

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

Answer 9

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

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

2. По некоторым причинам 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>

Answer 10

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

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