wie div Click-fähig zu machen?

Question

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

Für div wie oben, wenn die Maus auf, sollte es werden cursor: pointer, und wenn darauf geklickt wird, feuert ein

Javascript-Funktion, wie diese Arbeit zu tun?

Bearbeiten : und wie die Hintergrundfarbe von div zu ändern, wenn die Maus auf

Erneut bearbeiten : Wie die erste Spanne der Breite machen = 120px scheint zu funktionieren nicht in Firefox

Answer 1

ihm eine ID geben wie "etwas", dann:

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

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

Ändern der Hintergrundfarbe (wie pro Ihre aktualisierte Frage):

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

Answer 2

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

ist die einfachste Sache, die funktioniert.

Natürlich in der Endlösung Sie das Markup von Styling (CSS) und Verhalten (JavaScript) trennen sollte - lesen Sie es auf einer Liste auseinander für gute Praktiken nicht nur dieses spezielle Problem zu lösen, aber in Markup-Design im allgemeinen.

Answer 3

Ich schlage vor, jQuery zu verwenden:

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

Answer 4

Ich schlage vor, eine CSS-Klasse namens Clickbox zu verwenden und aktivieren Sie es mit jQuery:

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

Nun ist die einzige Sache, die Sie tun müssen, ist Ihre div als anklickbare markieren und einen Link:

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

Plus ein CSS-Stil der Mauszeiger zu ändern:

.clickbox {
    cursor: pointer;
}

Einfach, nicht wahr?

Answer 5

fügen Sie die Onclick Attribut

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

Um den Cursor zu erhalten Verwendung css Cursor Regel zu ändern.

div[onclick] {
  cursor: pointer;
}

Der Selektor verwendet einen Attributselektor, die nicht in einigen Versionen von IE nicht funktioniert. Wenn Sie diese Versionen unterstützen möchten, fügen Sie eine Klasse zu Ihrem div.

Answer 6

Wie Sie Ihre Frage aktualisiert, hier ist ein obtrustive Beispiel:

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

    div.style.cursor = 'pointer';
    div.onmouseover = function()
    {
        div.style.background = "#ff00ff";
    };
}

Answer 7

<div style="cursor: pointer;" onclick="theFunction()" onmouseover="this.style.background='red'" onmouseout="this.style.background=''" ><span>shanghai</span><span>male</span></div>

Dies wird die Hintergrundfarbe ändern und

Answer 8

Die einfachste von allen:

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

Answer 9

Wenn diese div ist eine Funktion schlage ich vor Verwendung cursor: pointer in Ihrem Stil wie style =. "Cursor: pointer" und Onclick-Funktion verwenden kann,

wie folgt

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

, aber ich schlage vor, Sie verwenden einen Rahmen JS wie jquery oder extjs