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


545

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

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


79
одной хорошей причиной будет фоновое изображение в div
Simon_Weaver

1
У меня есть хороший рабочий пример, основанный на ответе с наибольшим количеством голосов. Проверьте скрипку здесь
Майк

7
В HTML5 вполне допустимо иметь divпод a.
Хуан А. Наварро

Ответы:


739

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

11
Спасибо работает хорошо. Если что-то ужасно сломалось (как они сделали для меня) в IE8, убедитесь, что у вас есть открывающий и закрывающий тег span (<span ...> </ span>) вместо пустого span (<span ... /> ).
Кампи

1
Код не работает полностью в IE7 / 8, другие элементы, которые можно выбрать, имеют приоритет над <a><span></span></a>элементом. Т.е. изображения и тексты внутри контейнера не будут связываться, даже если установлен z-индекс.
Spoike

67
Скрипка для людей, которые глупы, как я, и что-то неправильно поняли, поэтому пришлось немного поиграть с этим: jsfiddle.net/hf75B/1
AlexMA

7
Вы пробовали это в IE9? Мне нравится этот метод, и я использую его, но я только что проверил его (включая скрипку из @AlexMA) в IE9, и я вижу, что вы можете щелкнуть в любом месте div ИСКЛЮЧИТЬ текст. Когда вы наводите курсор мыши на текст, курсор меняется на стандартный текстовый курсор, и он ничего не делает, когда вы нажимаете на текст. Поскольку пользователи склонны нажимать на текстовые элементы (и когда текстовые элементы заполняют большую часть div), это делает это решение непригодным для использования в IE9. Кто-нибудь еще испытал это или есть решение?
Bigmac

2
Кто-нибудь знает, как: hover css работает с этим решением? Возможно, ссылаясь на ответ, поставленный в скрипке?
nktokyo

252

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

a {
    display: block;
}

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


11
Однако это не превращает div в ссылку. Делает ссылку в элемент блока. Это немного по-другому.
jjnguy

1
Это решение вашей проблемы. Потому что вы можете изменить div, можно щелкнуть как гиперссылку, но вы не можете установить курсор (= руку) для отображения во всех браузерах (только IE поддерживает его!).
Soul_Master

3
jjnguy: как? Мне не нравится иметь много контента в ссылке, но это также может быть частью навигационного меню или чего-то в этом роде. Элемент привязки (<a>) не обязательно должен быть простым текстом, не так ли? Каким образом неправильно превращать его в блок? Это семантически правильно, и его можно использовать для отображения, как вы хотите.
Арве Систад

23
Это совершенно правильное решение неопределенного вопроса. Вы на самом деле МОЖЕТЕ просто обернуть элемент привязки вокруг div, но это будет семантически неверно. (Блок-элемент внутри встроенного элемента).
Traingamer

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

72

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

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

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

Тааак ...

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

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


6
Это допустимый HTML, если <div>он не содержит интерактивного содержимого (других <a>элементов, <button>элементов и т. Д.).

50
Ваш пример не является допустимым HTML - блочный элемент, содержащийся во встроенном элементе - если вы не используете HTML5, который сделал исключение для ссылок.
Thepeer

1
Это плохой пример, потому что aтег берет весь текст в a divи подчеркивает его ... это можно смягчить с помощью стилей, но верхний ответ лучше.
Дмитрий Нестерук

2
a #thediv{font-weight:normal;text-decoration:none;}это все, что вам нужно по стилю.
Tyjkenn

1
Попробовал это, и это сработало, однако сломало позиционирование элемента. Да, dctype - это HTML5 в Chrome (версия 2014 года) ..
BAR

60

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

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

9
Это приводит к плохой семантике на странице, поэтому я бы избегал этого, хотя это технически возможно.
Арве Систад

2
Я думал об использовании этого решения, но оно уродливо. Мне нравятся решения, связанные с дисплеем: лучше блокировать.
allyourcode

9
Это похоже на ссылку, но не является реальной ссылкой. У него серьезные проблемы с юзабилити и доступностью, и это очень неприятное решение.
WhyNotHugo

2
Лучшее решение. Нам просто нужно запустить скрипт и отправить ему «это».
Арман Хайотс

3
Если у них не включен JS, вы потеряли функциональность. Так же как быть плохим для SEO.
BAR

40

Эта опция не требует 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/


1
Спасибо! Решение Криса Джумонвилля отлично работает как на Android, так и на iPhone. Пример: gastateparks.org/specials
Лорен

1
Разве это не должно быть на div.feature > aвсякий случай, если часть «все остальное» также содержит ссылку, скрытую глубоко внутри?
TWiStErRob

это должен быть выбранный ответ, работает и с начальной
Энтони Кал

23

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

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

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

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

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


14

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


Чтобы получить информацию об атрибутах данных, смотрите: ejohn.org/blog/html-5-data-attributes
Эрхард Динхобл,

13

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

Код :

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


9

Чтобы заставить ответ 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>

8

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

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

1
Вы также можете убедиться, что родительский div имеет нулевое заполнение, а тег <a> имеет нулевое поле.
Nilpo

4

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


Он не пройдет проверку HTML. Позиция не может хранить блочные позиции.
Кшиштоф Тжос

Я имею в виду, что <div><span></span></div>это действительно так и <span><div></div></span>нет. Вы не должны помещать display: inline;тип предметов в display: block;предметы. <a>Тег инлайн - бокс.
Кшиштоф Тшос

Да, это может работать, потому что Вы можете сделать это несколькими способами (лучше или хуже). Это конкретное решение не является хорошим, потому что более старая проверка HTML :).
Кшиштоф Тшос

1
Имеет ли значение, что «старая проверка HTML» не проходит это? Это разрешено сейчас, html5 и по какой-то причине, так почему бы не использовать его? Я думаю, что это решение хорошо (оно часто требует удаления подчеркивания для содержимого div, но все же).
Тодило

@Todilo Потому что, пока <a><div></div></a>действует и работает, <a><div><a></a></div></a>не действует и не работает.
coredumperror

3

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

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

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

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

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

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


Спасибо! Мне нужно было смоделировать карту изображения с пустыми якорями над изображением, и IE позволял вам щелкать только при наличии содержимого. Это исправило это.
MDCore

2

Просто поместите ссылку в блок и улучшите ее с помощью 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 ссылки в DIV ... Как я могу изменить его, чтобы иметь возможность нажать на обе ссылки? (в настоящее время я перехожу на «mylink.html», если я также щелкаю по второй ссылке ..)
m3tsys

2

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

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

2

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

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


Работал на меня. Только не забудьте относительно позиционировать родительский элемент.
Саиф Аль Фалах

1

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

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

display:block;

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

height:60px;

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

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

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


1

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


0

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

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

0

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

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

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

0

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

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

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

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

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

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


0

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

3
Опять же, это функциональное решение, но не совсем в духе первоначального вопроса, который был для решения XHTML. Хотя ваш ответ не так уж и важен, ваш ответ начинает вносить шум в вопрос.
Совют

0

Опция, которая не была упомянута, использует 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>


-1

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

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

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

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

1
По какой-то причине код не отображается. Я использовал onclick с переменной jsp для создания динамической ссылки
Бекки,

-3

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

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

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

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

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

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


он искал «Я ищу правильный путь XHTML 1.1»
Марк

-4

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

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

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.