comment rendre une division cliquable ?

Question

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

Pour une division comme ci-dessus, lorsque la souris est dessus, elle doit devenir curseur:pointeur, et lorsqu'elle est cliquée, elle déclenche un

fonction javascript, comment faire ce travail ?

EDITAR et comment changer la couleur de fond de la division lorsque la souris est activée ?

EDIT ENCORE Comment faire en sorte que le premier span ait une largeur de 120px ? Il semble que cela ne fonctionne pas dans Firefox.

Answer 1

Donnez-lui un identifiant comme "quelque chose", alors :

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

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

Changer la couleur de l'arrière-plan (selon votre question mise à jour) :

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

Answer 2

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

est la chose la plus simple qui fonctionne.

Bien sûr, dans la solution finale, vous devez séparer le balisage du style (css) et du comportement (javascript) - lisez à ce sujet. sur une liste à part pour les bonnes pratiques, non seulement pour résoudre ce problème particulier, mais aussi pour la conception de balises en général.

Answer 3

Le plus simple d'entre eux :

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

Answer 4

Je suggère d'utiliser jQuery :

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

Answer 5

Je suggère d'utiliser une classe CSS appelée clickbox et de l'activer avec jQuery :

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

Il ne vous reste plus qu'à marquer votre division comme étant cliquable et à fournir un lien :

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

Plus un style CSS pour changer le curseur de la souris :

.clickbox {
    cursor: pointer;
}

Facile, n'est-ce pas ?