webentwicklung-frage-antwort-db.com.de

Wie mache ich Div anklickbar?

<div><span>shanghai</span><span>male</span></div>

Bei div wie oben sollte die Maus zu cursor: pointer werden und beim Klicken a abfeuern

javascript-Funktion, wie macht man das?

EDIT : und wie ändere ich die Hintergrundfarbe von div, wenn die Maus eingeschaltet ist?

WIEDER BEARBEITEN: Wie erstelle ich die Breite des ersten Feldes = 120px? Scheint nicht in Firefox zu funktionieren

javascriptcsshtmlclick
28
omg

Gib ihm eine ID wie "irgendetwas", dann:

var something = document.getElementById('something');

something.style.cursor = 'pointer';
something.onclick = function() {
    // do something...
};

Ändern der Hintergrundfarbe (gemäß Ihrer aktualisierten Frage):

something.onmouseover = function() {
    this.style.backgroundColor = 'red';
};
something.onmouseout = function() {
    this.style.backgroundColor = '';
};
50
James

<div style="cursor: pointer;" onclick="theFunction()">

ist die einfachste Sache, die funktioniert.

Natürlich sollten Sie in der endgültigen Lösung das Markup von Stil (CSS) und Verhalten (Javascript) trennen - lesen Sie weiter auf einer Liste getrennt für gute Praktiken, um nicht nur dieses spezielle Problem zu lösen, sondern auch im Markup-Design allgemein.

26
macbirdie

Ich empfehle jQuery:

$('#mydiv')
  .css('cursor', 'pointer')
  .click(
    function(){
     alert('Click event is fired');
    }
  )
  .hover(
    function(){
      $(this).css('background', '#ff00ff');
    },
    function(){
      $(this).css('background', '');
    }
  );
8
Liu Peng

Ich schlage vor, eine CSS-Klasse namens clickbox zu verwenden und sie mit jQuery zu aktivieren:

$(".clickbox").click(function(){
     window.location=$(this).find("a").attr("href"); 
     return false;
 });

Jetzt müssen Sie nur noch Ihr Div als anklickbar markieren und einen Link bereitstellen:

<div id="logo" class="clickbox"><a href="index.php"></a></div>

Plus einen CSS-Stil, um den Mauszeiger zu ändern:

.clickbox {
    cursor: pointer;
}

Einfach, nicht wahr?

5
cldrr

füge das onclick Attribut hinzu

<div onclick="myFunction( event );"><span>shanghai</span><span>male</span></div>

Um den Cursor zum Ändern zu bewegen, verwenden Sie css's cursor rule .

div[onclick] {
  cursor: pointer;
}

Der Selektor verwendet einen Attributselektor, der in einigen IE-Versionen nicht funktioniert. Wenn Sie diese Versionen unterstützen möchten, fügen Sie Ihrer div eine Klasse hinzu.

2
Bjorn Tipling

Das einfachste von allen:

<div onclick="location.href='where.you.want.to.go'" style="cursor:pointer"></div>
2
Bouramas

Als Sie Ihre Frage aktualisiert haben, sehen Sie hier ein eindringliches Beispiel:

window.onload = function()
{
    var div = document.getElementById("mydiv");

    div.style.cursor = 'pointer';
    div.onmouseover = function()
    {
        div.style.background = "#ff00ff";
    };
}
2
alexn
<div style="cursor: pointer;" onclick="theFunction()" onmouseover="this.style.background='red'" onmouseout="this.style.background=''" ><span>shanghai</span><span>male</span></div>

Dadurch wird auch die Hintergrundfarbe geändert

2
Rakesh Juyal

Wenn dieses Div eine Funktion ist, empfehle ich die Verwendung von cursor: pointer in Ihrem Stil wie style = "cursor: pointer" und kann die Funktion onclick verwenden.

so was

<div onclick="myfunction()" style="cursor:pointer"></div>

aber ich schlage vor, Sie verwenden ein JS-Framework wie jquery oder extjs

1
pedrofernandes