come rendere div cliccabile?

Question

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

Per div come sopra, quando il mouse è acceso, dovrebbe diventare cursore: puntatore e, quando si fa clic, sparare un

funzione javascript, come fare quel lavoro?

MODIFICA : e come cambiare il colore di sfondo del div quando il mouse è acceso?

MODIFICA DI NUOVO : come rendere la larghezza della prima span = 120px? Sembra non funzionare in Firefox

Answer 1

Dagli un ID come " qualcosa " ;, quindi:

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

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

Modifica del colore di sfondo (come da domanda aggiornata):

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

Answer 2

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

è la cosa più semplice che funziona.

Naturalmente nella soluzione finale dovresti separare il markup dallo stile (css) e dal comportamento (javascript) - leggi su di esso in un elenco a parte per buone pratiche non solo sulla risoluzione di questo particolare problema ma sulla progettazione del markup in generale.

Answer 3

Suggerisco di usare jQuery:

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

Answer 4

Suggerisco di usare una classe CSS chiamata clickbox e attivarla con jQuery:

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

Ora l'unica cosa che devi fare è contrassegnare il tuo div come cliccabile e fornire un link:

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

Più uno stile CSS per cambiare il cursore del mouse:

.clickbox {
    cursor: pointer;
}

Facile, vero?

Answer 5

aggiungi l'attributo onclick

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

Per far cambiare il cursore usa regola del cursore css .

div[onclick] {
  cursor: pointer;
}

Il selettore utilizza un selettore di attributi che non funziona in alcune versioni di IE. Se vuoi supportare quelle versioni, aggiungi una classe al tuo div.

Answer 6

Mentre aggiorni la tua domanda, ecco un esempio distruttivo:

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>

Questo cambierà anche il colore di sfondo

Answer 8

Il più semplice di tutti:

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

Answer 9

Se questa div è una funzione ti suggerisco di usare il cursore: puntatore nel tuo stile come style = " cursore: puntatore " e può usare la funzione onclick.

come questo

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

ma ti suggerisco di utilizzare un framework JS come jquery o extjs