web-dev-qa-db-fra.com

comment rendre div cliquable?

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

Pour les div comme ci-dessus, lorsque la souris est activée, elle doit devenir curseur: pointeur, et lorsque vous cliquez dessus, déclenchez un

fonction javascript, comment faire ce travail?

MODIFIER : et comment changer la couleur d'arrière-plan de div lorsque la souris est allumée?

EDIT AGAIN: comment faire la largeur de la première travée = 120px? Semble ne pas fonctionner dans Firefox

javascriptcsshtmlclick
28
omg

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

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

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

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

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

<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-le sur une liste à part pour les bonnes pratiques sur non seulement la résolution de ce problème particulier, mais dans la conception du balisage en général.

26
macbirdie

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', '');
    }
  );
8
Liu Peng

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;
 });

Maintenant, la seule chose que vous avez à faire est de marquer votre div comme étant cliquable et de 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, non?

5
cldrr

ajoutez l'attribut onclick

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

Pour que le curseur change, utilisez règle du curseur de CSS .

div[onclick] {
  cursor: pointer;
}

Le sélecteur utilise un sélecteur d'attributs qui ne fonctionne pas dans certaines versions d'IE. Si vous souhaitez prendre en charge ces versions, ajoutez une classe à votre div.

2
Bjorn Tipling

Le plus simple de tous:

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

Lorsque vous avez mis à jour votre question, voici un exemple obtrustif:

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>

Cela changera également la couleur d'arrière-plan

2
Rakesh Juyal

Si ce div est une fonction, je suggère d'utiliser le curseur: pointeur dans votre style comme style = "curseur: pointeur" et peut utiliser la fonction onclick.

comme ça

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

mais je vous suggère d'utiliser un framework JS comme jquery ou extjs

1
pedrofernandes