it-swarm.com.ru

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

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

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

518
EE.

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

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

a {
    display: block;
}

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

246
Soviut

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

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

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

Тааак ...

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

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

64
Zizo47

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

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

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

36
MagTun

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

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

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

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

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

23
Calvin

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

Код :

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

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

11
Erhard Dinhobl

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

  1. IE не будет учитывать z-index, если элемент не имеет фонового цвета, поэтому ссылка не будет перекрывать части содержащего содержимого div, только пустые части. Чтобы это исправить, добавлен фон с непрозрачностью 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>
9
Thomas Scheelhardt

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

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

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

4
Vamsi Pavan Mahesh

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

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

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

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

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

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

3
Drake

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

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

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

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

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

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

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

display:block;

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

height:60px;

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

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

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

1
Hbirjand
<a href="…" style="cursor: pointer;"><div> … </div></a>
1
Phillip Chaffee

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

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

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

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

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

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

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

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

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

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

Поэтому введите href следующим образом:

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

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

0
jeevanism