Створіть діву за посиланням

У мене є <div>блок з фантазійним візуальним контентом, який я не хочу змінювати. Я хочу зробити це посиланням, яке можна натискати.

Я шукаю щось подібне <a href="…"><div> … </div></a>, але це дійсно XHTML 1.1.

Прийшов сюди в надії знайти краще рішення, яке моє, але мені не подобається жоден із запропонованих тут пропозицій. Я думаю, що хтось із вас неправильно зрозумів це питання. ОП хоче зробити так, щоб поділ, наповнений вмістом, поводився як посилання. Одним із прикладів цього можуть бути оголошення у фейсбуці - якщо подивитися, вони насправді належної розмітки.

Для мене no-носом є: 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>тег діяти як a block, така сама поведінка <div>.

a {
    display: block;
}

Потім ви можете встановити ширину та висоту на ній.

Це давнє запитання, але я думав, що відповім на нього, оскільки всі тут мають деякі шалені рішення. Це насправді дуже просто ...

Тег прив’язки працює так -

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

Sooo ...

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

Хоча я не впевнений, чи справедливо це. Якщо це міркування за розмовними рішеннями, то я вибачаюся ...

Потрібен трохи JavaScript. Але, divможна було натискати.

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

Цей параметр не потребує порожнього.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не забезпечує семантичну інформацію для екранного зчитувача, щоб визначити, що діва функціонує як посилання.

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

<div data-link="http://www.google.at/">Some content in the div which is arbitrary</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-індекс, якщо елемент не має фонового кольору, тому посилання не перекриватиме частин divig, що містить вміст, лише порожні частини. Щоб виправити це, додається фон з непрозорістю 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>

Ви також можете спробувати, загорнувши якір, повернувши його висоту та ширину, щоб вони були однаковими з його батьківським. Це прекрасно працює для мене.

<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 не буде робити порожній дів, який можна натиснути, він лише зробить текст / зображення в межах цього діва / тегу, яким можна натискати.

Рішення: Наповніть діва зображенням бакграунда і захойте його від глядача.

Як? Ви ставите хороші запитання, тепер слухайте. додайте цей тег фонового стилю до тегу

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

І там у вас є цілий дів, який зараз можна натискати. Це був найкращий спосіб для мене, тому що я використовую його для своєї фотогалереї, щоб користувач клацав на одній половині зображення, щоб рухався вліво / вправо, а потім розміщував невелике зображення, а також лише для візуальних ефектів. тому для мене я в будь-якому разі використовував ліві та праві зображення як фонові зображення!

Просто створіть посилання в блоці та додайте його до jquery. Це деградує на 100% витончено для будь-кого без JavaScript. Робити це за допомогою html - насправді не найкраще рішення. Наприклад:

<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_link:hover {cursor: pointer;}

Для бонусних очок застосовуйте ці стилі лише у тому випадку, якщо javascript увімкнено, додавши клас "js_enabled" до div, body або інше.

Цей приклад працював для мене:

<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 і знаходиться над усім вашим дівом на z-індексі, тому коли хтось натискає на цей div, натискання по суті перехоплюється вашим невидимим шаром "span", який пов'язаний.

Примітка. Якщо ви вже використовуєте z-індекси для інших елементів, просто переконайтеся, що значення цього z-індексу вище, ніж усе, що ви хочете, щоб він опирався "зверху".

Насправді вам потрібно включити код JavaScript на даний момент, перевірте цей підручник, щоб зробити це.

але є хитрий спосіб досягти цього за допомогою CSS-коду, ви повинні вкласти тег прив’язки всередині вашого тегу div, і ви повинні застосувати це властивість до нього,

display:block;

коли ви це зробили, це зробить всю область ширини, яку можна натискати (але в межах висоти тега прив’язки), якщо ви хочете охопити всю ділову область, ви повинні встановити висоту тега прив’язки точно до висоти 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 та use

$('').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>

просто подумай трохи поза коробкою ;-)