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

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

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

+521
28 апр. '09 в 3:15
источник поделиться
26 ответов

Пришел сюда в надежде найти лучшее решение, чем мое, но мне не нравится ни одно из предлагаемых здесь. Я думаю, что некоторые из вас неправильно поняли вопрос. ОП хочет, чтобы 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), чтобы привести их перед стандартной связью промежутка.
+718
16 авг. '10 в 14:32
источник

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

a {
    display: block;
}

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

+248
28 апр. '09 в 3:20
источник

Связанные вопросы


Похожие вопросы

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

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

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

Тааак...

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

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

+65
14 апр. '11 в 1:12
источник

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

<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>
+55
28 апр. '09 в 3:19
источник

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

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/

+36
27 февр. '14 в 16:25
источник

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

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

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

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

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

+23
28 апр. '09 в 3:52
источник

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

Код:

<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>
+13
12 февр. '11 в 4:35
источник

Самый простой способ - использовать 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.

+11
26 сент. '13 в 14:13
источник

Чтобы заставить ответ отвечать в 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>
+9
06 нояб. '11 в 21:00
источник

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

<div id="css_ID">
    <a href="http://www.your_link.com" style="display:block; height:100%; width:100%;"></a>
</div>
+7
23 авг. '12 в 17:25
источник

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

+4
19 февр. '15 в 13:17
источник

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

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

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

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

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

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

+3
11 авг. '10 в 15:23
источник

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

<div style="position: relative; width:191px; height:83px;">
    <a href="link.php" style="display:block; width:100%; height:100%;"></a>
</div>
+2
10 окт. '13 в 11:27
источник

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

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

+2
09 мар. '19 в 1:17
источник

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

+2
02 нояб. '10 в 16:27
источник

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

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

display:block;

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

height:60px;

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

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

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

+1
01 авг. '14 в 14:56
источник
<a href="…" style="cursor: pointer;"><div> … </div></a>
+1
18 апр. '19 в 0:58
источник

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

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

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

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

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

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

0
12 апр. '12 в 3:30
источник

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

Это лучший способ сделать это, как используется на веб-сайте 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);
      }
    }
}
0
06 июл. '16 в 12:37
источник

Вы можете указать ссылку на свой 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>
0
30 мая '13 в 12:49
источник

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

$('').click(function(e){
e.preventDefault();
//DO SOMETHING
});
0
27 авг. '13 в 16:42
источник

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

<div onclick="location.href='page.html';"  style="cursor:pointer;">...</div>
0
06 нояб. '11 в 23:00
источник

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

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

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

   <div onclick="location.href='<%=Webpage%>';"  style="cursor:pointer;">...</div> 
-1
19 апр. '12 в 15:10
источник

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

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

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

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

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

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

-3
04 мая '12 в 21:31
источник

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

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

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

-4
02 дек. '09 в 0:18
источник

Посмотрите другие вопросы по меткам или Задайте вопрос