Cum pot face ca întregul div să fie un link? [duplicat] (Programare, Html, Css)

GeekedOut a intrebat.

Am un div ca acesta <div class="xyz"></div> și tot conținutul din acel div este în css. Cum fac acel div să devină un link? Am încercat să înfășor tag-ul a în jurul lui, dar nu pare să funcționeze.

Mulțumesc!!!

Comentarii

  • Cum l-ai înfășurat cu a tag? –  > Por Muhammad Abrar.
4 răspunsuri
Barry Chapman

Trebuie să atribuiți display: block; la ancora de înfășurare. În caz contrar, nu se va înfășura corect.

<a style="display:block" href="http://justinbieber.com">
  <div class="xyz">My div contents</div>
</a>

Comentarii

    16

  • Acest lucru este ilegal, nu va trece de validare. –  > Por radonys.
  • 22

  • Nu a cerut să treacă validarea, a întrebat cum să faci o ancoră să înfășoare un div. –  > Por Barry Chapman.
  • 50

  • +1 Pentru un link excelent și absolut relevant –  > Por Lars Holdgaard.
  • Acest lucru a rezolvat faptul că „deschideți în fila nouă” apare atunci când faceți clic dreapta oriunde pe span, în loc să apară doar textul linkului pentru meniul meu. –  > Por davidjmcclelland.
  • 36

  • Nu mai este cazul cu HTML 5 The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links). This example shows how this can be used to make an entire advertising block into a link w3.org/TR/html5/text-level-semantics.html#the-a-element –  > Por feitla.
Jukka K. Korpela

Utilizarea

<a href="foo.html"><div class="xyz"></div></a>

funcționează în browsere, chiar dacă încalcă specificațiile HTML actuale. Este permisă în conformitate cu proiectele HTML5.

Atunci când spuneți că nu funcționează, ar trebui să explicați exact ce ați făcut (includerea codului jsfiddle este o idee bună), la ce vă așteptați și în ce fel comportamentul diferă de așteptările dumneavoastră.

Nu este clar ce vreți să spuneți prin „tot conținutul din acel div este în css”, dar presupun că înseamnă că conținutul este într-adevăr gol în marcajul HTML și că aveți CSS de genul

.xyz:before { content: "Hello world"; }

Întregul bloc este apoi clickabil, textul conținutului arătând ca un text de link acolo. Nu la asta vă așteptați?

ramsesoriginal

Înfășurarea unui <a> în jurul nu va funcționa (dacă nu setați <div> la display:inline-block; sau display:block; la <a>) deoarece div-ul este un element la nivel de bloc și <a> nu este.

<a href="http://www.example.com" style="display:block;">
   <div>
       content
   </div>
</a>

<a href="http://www.example.com">
   <div style="display:inline-block;">
       content
   </div>
</a>

<a href="http://www.example.com">
   <span>
       content
   </span >
</a>

<a href="http://www.example.com">
   content
</a>

Dar poate ar trebui să săriți peste <div> și să alegeți un element <span> în schimb, sau pur și simplu <a>. Și dacă doriți cu adevărat să faceți div-ul să poată fi accesat, ați putea atașa o redirecționare javascript cu un handler onclick, ceva de genul:

document.getElementById("myId").setAttribute('onclick', 'location.href = "url"'); 

dar v-aș recomanda să nu faceți asta.

Comentarii

  • Elementul div a trebuit să fie inline-block în cazul meu și funcționează perfect. Toate elementele <p> din interiorul div-ului vor avea comportamentul de bază al link-ului atunci când trec pe deasupra div-ului cu gaură. –  > Por The Demz.
  • JS a funcționat destul de bine pentru mine. Am adăugat, de asemenea, style=”cursor: pointer;” la div-ul container pentru ca acesta să arate ca un link pentru utilizator atunci când trece peste el. –  > Por Aurelin.
laymanje

html-ul:

 <a class="xyz">your content</a>

css:

.xyz{
  display: block;
}

Acest lucru va face ca ancora să fie un element la nivel de bloc, ca un div.

Tags:,