wake-up-neo.com

Wie kann man ein ganzes 'div' in HTML und CSS ohne JavaScript anklickbar machen?

Ich möchte es so machen, dass ein ganzes div anklickbar ist und auf eine andere Seite verweist, wenn ohne JavaScript und mit gültigem Code/Markup geklickt wird.

Wenn ich das habe, was soll das Ergebnis sein?

<a href="#">
<div>This is a link</div>
</a>

Der W3C-Validator gibt an, dass Blockelemente nicht in ein Inline-Element eingefügt werden dürfen. Gibt es einen besseren Weg, dies zu tun?

htmlcssclick
119
Andy Lobel

ist dies möglich, wenn ein ganzer div ohne Javascript und mit gültigem Code auf eine andere Seite geklickt wird?

Pedantische Antwort: Nein.

Da Sie bereits einen anderen Kommentar eingegeben haben, ist es ungültig, ein div in einem a -Tag zu verschachteln.

Es hindert Sie jedoch nichts daran, dass sich Ihr a -Tag sehr ähnlich wie ein div verhält, mit der Ausnahme, dass Sie keine anderen Block-Tags darin verschachteln können. Wenn es zu Ihrem Markup passt, setzen Sie display:block auf Ihrem a Tag und Größe/float es, wie Sie möchten.

Wenn Sie der Annahme Ihrer Frage widersprechen, dass Sie Javascript vermeiden müssen, können Sie, wie andere uns mitgeteilt haben, den onClick-Ereignishandler verwenden. jQuery ist eine beliebte Wahl, um dies einfach und wartbar zu machen.

84
Alex Norcliffe

Es ist möglich, einen Link zu erstellen, der das gesamte Div ausfüllt, wodurch das Div anklickbar erscheint.

CSS:

#my-div {
    background-color: #f00;
    width: 200px;
    height: 200px;
}
a.fill-div {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}

HTML:

<div id="my-div">
    <a href="#" class="fill-div"></a>
</div>
141
Mario
<div onclick="location.href='#';" style="cursor: pointer;">
</div>
78
Jamshid Hashimi

Ohne JS mache ich das so:

Mein HTML:

<div class="container">
  <div class="sometext">Some text here</div>
  <div class="someothertext">Some other text here</div>
  <a href="#" class="mylink">text of my link</a>
</div>

Mein CSS:

.container{
  position: relative;
}

.container.a{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent: -9999px; //these two lines are to hide my actual link text.
  overflow: hidden; //these two lines are to hide my actual link text.
}
21
Sinan Erdem

Meine Lösung ohne JavaScript/Bilder. Nur CSS verwendet. Es funktioniert in allen Browsern.

HTML:

<a class="add_to_cart" href="https://www.redracingparts.com" title="Add to Cart!">
  buy now<br />free shipping<br />no further costs
</a>

CSS:

.add_to_cart:hover {
  background-color:#FF9933;
  text-decoration:none;
  color:#FFFFFF;
}

.add_to_cart {
  cursor:pointer;
  background-color:#EC5500;
  display:block;
  text-align:center;
  margin-top:8px;
  width:90px;
  height:31px;
  border-radius:5px;
  border-width:1px;
  border-style:solid;
  border-color:#E70000;
}

Es gibt ein Beispiel auf https://www.redracingparts.com/english/motorbikesmotorcycles/stackoverflow/examples/div/clickable.php

10
John

Das Verschachteln von Elementen auf Blockebene in Ankern ist nicht mehr ungültig in HTML5 . Siehe http://html5doctor.com/block-level-links-in-html-5/ und http://www.w3.org/TR/html5/the-a -element.html . Ich sage nicht, dass Sie es verwenden sollten, aber in HTML5 ist es in Ordnung, <a href="#"><div></div></a> Zu verwenden.

Die akzeptierte Antwort ist ansonsten die beste. Die Verwendung von JavaScript, wie von anderen vorgeschlagen, ist ebenfalls schlecht, da dadurch der "Link" für Benutzer ohne JavaScript, einschließlich Suchmaschinen und anderer, unzugänglich wird .

8
selfthinker

mit jQuery können Sie das tun.

Rufen Sie die Funktion click() auf: http://api.jquery.com/click/

Beispiel:

$('#yourDIV').click(function() {
  alert('You clicked the DIV.');
});
5
Josh Foskett

Nun, Sie könnten entweder <a></a> markiert und platziert das div darin und fügt eine href hinzu, wenn das div als Link fungieren soll. Oder verwenden Sie einfach Javascript und definieren Sie eine 'OnClick'-Funktion. Anhand der begrenzten Informationen ist es jedoch schwierig, den Kontext Ihres Problems zu bestimmen.

3
Dot NET
.clickable {
  cursor:pointer;
}
2
Bruno

AFAIK benötigen Sie mindestens ein bisschen JavaScript ...

Ich würde vorschlagen, jQuery zu verwenden.

Sie können diese Bibliothek in eine Zeile einfügen. Und dann kannst du mit auf dein div zugreifen

$('div').click(function(){
  // do stuff here
});

und auf das Klickereignis antworten.

0
Sebastian Oberste-Vorth

wir verwenden so

     <label for="1">
<div class="options">
<input type="radio" name="mem" id="1" value="1" checked="checked"/>option one
    </div>
</label>
   <label for="2"> 
<div class="options">
 <input type="radio" name="mem" id="2" value="1" checked="checked"/>option two
</div></label>

mit

  <label for="1">

tag und fangen ist mit

id=1

hoffe das hilft.

0
AMB

Etwas wie das?

<div onclick="alert('test');">

</div>
0
Tys