it-swarm.com.de

Wie füge ich einen "a href" Link zu einem "div" hinzu?

Ich muss wissen, wie man einem Div einen Href-Link hinzufügt? Setzen Sie das a href-Tag um das gesamte "buttonOne" -Div? Oder sollte es um oder in der "linkedinB" div liegen?

Hier ist mein HTML:

<div id="buttonOne">
  <div id="linkedinB">
    <img src="img/linkedinB.png" width="40" height="40">
  </div>
</div>
14
Wardenclyffe

Kannst du es nicht mit einem Tag umgeben?

  <a href="#"><div id="buttonOne">
        <div id="linkedinB">
            <img src="img/linkedinB.png" width="40" height="40">
        </div>
  </div></a>
13

In diesem Fall spielt es keine Rolle, da sich zwischen den beiden divs kein Inhalt befindet.

Entweder wird der Browser dazu gebracht, nach unten zu scrollen.

Das a-Element sieht folgendermaßen aus:

<a href="mypageName.html#buttonOne">buttonOne</a>

Oder:

<a href="mypageName.html#linkedinB">linkedinB</a>
4
Oded

versuche mit Javascript folgendes zu implementieren:

<div id="mydiv" onclick="myhref('http://web.com');" >some stuff </div>
<script type="text/javascript">
    function myhref(web){
      window.location.href = web;}
</script>
4
Contributor

Erstellen Sie eine Klasse mit dem Namen overlay und wenden Sie die folgende CSS an:

a.overlay { width: 100%; height:100%; position: absolute; }

Stellen Sie sicher, dass es sich in einem positionierten Element befindet.

Platzieren Sie einfach ein <a>-Tag mit dieser Klasse innerhalb des Divs, das Sie verknüpfen möchten:

<div id="buttonOne">
  <a class="overlay" href="......."></a>
    <div id="linkedinB">
       <img src="img/linkedinB.png" alt="never forget the alt tag" width="40" height="40"/>
    </div>
 </div>

Der Vorschlag von PhilipK funktioniert möglicherweise, wird jedoch nicht überprüft, da Sie kein Blockelement (div) in ein Inline-Element (a) einfügen können. Und wenn Ihre Website nicht gültig ist, wird der W3C Ninja für Sie kommen! 

Ein anderer Tipp wäre, das Inline-Styling zu vermeiden.

2
Carlo Palinckx

Ich würde sagen:

 <a href="#"id="buttonOne">
            <div id="linkedinB">
                <img src="img/linkedinB.png" width="40" height="40">
            </div>
      </div> 

Es wird jedoch immer noch ein Link sein. Wenn Sie Ihren Link in eine Schaltfläche ändern möchten, müssen Sie #buttonone in #buttonone a {Ihre CSS hier} umbenennen.

1
Dirk de Man

Ihre Lösungen scheinen für mich nicht zu funktionieren, ich habe den folgenden Code. Wie füge ich den Link in die letzten beiden Divisionen ein .

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-Microsoft-com:vml" xmlns:o="urn:schemas-Microsoft-com:office:office">

<style>
/* Import */
@import url(https://fonts.googleapis.com/css?family=Quicksand:300,400);
* {
  font-family: "Quicksand", sans-serif; 
  font-weight: bold; 
  text-align: center;  
  text-transform: uppercase; 
  -webkit-transition: all 0.25s ease; 
  -moz-transition: all 0.25s ease; 
  -ms-transition: all 0.25s ease; 
  -o-transition: all 0.025s ease; 
}

/* Colors */

#ora {
  background-color: #e67e22; 
}

#red {
  background-color: #e74c3c; 
}

#orab {
  background-color: white; 
  border: 5px solid #e67e22; 
}

#redb {
  background-color: white; 
  border: 5px solid #e74c3c; 
}
/* End of Colors */

.B {
  width: 240px; 
  height: 55px; 
  margin: auto; 
  line-height: 45px; 
  display: inline-block; 
  box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  -ms-box-sizing: border-box; 
  -o-box-sizing: border-box; 
} 

#orab:hover {
  background-color: #e67e22; 
}

#redb:hover {
  background-color: #e74c3c; 
}
#whib:hover {
  background-color: #ecf0f1; 
}

/* End of Border

.invert:hover {
  -webkit-filter: invert(1);
  -moz-filter: invert(1);
  -ms-filter: invert(1);
  -o-filter: invert(1);
}
</style>
<h1>Flat and Modern Buttons</h1>
<h2>Border Stylin'</h2> 

<div class="B bo" id="orab">See the movies list</div></a>
<div class="B bo" id="redb">Avail a free rental day</div>

</html>
0
Faheem Ahmad