làm thế nào để làm cho div nhấp chuột có thể?

Question

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

Đối div như trên, khi chuột trên, nó sẽ trở thành con trỏ: con trỏ, và khi nhấn vào, bắn một hàm

javascript, làm thế nào để làm công việc đó?

EDIT: và cách thay đổi màu nền của div khi chuột đang bật?

EDIT LẠI: làm thế nào để làm cho nhịp cầu đầu tiên của width = 120px vẻ không làm việc trong firefox

Answer 1

Give it ID như "cái gì đó", sau đó:

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

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

Thay đổi nền màu (theo câu hỏi được cập nhật của bạn):

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

Answer 2

thêm onclick thuộc tính

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

Để có được con trỏ để thay đổi sử dụng css's cursor rule.

div[onclick] { 
    cursor: pointer; 
} 

Bộ chọn sử dụng bộ chọn thuộc tính không hoạt động trong một số phiên bản của IE. Nếu bạn muốn hỗ trợ các phiên bản đó, hãy thêm một lớp vào div của bạn.

Answer 3

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

là điều đơn giản nhất hoạt động. Tất nhiên trong giải pháp cuối cùng, bạn nên tách đánh dấu khỏi phong cách (css) và hành vi (javascript) - đọc trên đó on a list apart để thực hành tốt không chỉ giải quyết vấn đề cụ thể này mà còn trong thiết kế đánh dấu nói chung.

Answer 4

Nếu div này là một chức năng tôi đề nghị sử dụng con trỏ: con trỏ theo kiểu của bạn như style = "cursor: pointer" và có thể sử dụng chức năng onclick.

như thế này

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

nhưng tôi đề nghị bạn sử dụng một khuôn khổ JS như jquery hoặc extjs

Answer 5

Như bạn cập nhật câu hỏi của bạn, sau đây là một ví dụ obtrustive:

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

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

Answer 6

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

này sẽ thay đổi màu nền cũng

Answer 7

Tôi đề nghị để sử dụng jQuery:

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

Answer 8

Tôi đề nghị sử dụng một lớp CSS gọi là clickbox và kích hoạt nó với jQuery:

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

Bây giờ điều duy nhất bạn phải làm là đánh dấu div của bạn có thể click và cung cấp một liên kết:

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

Cộng với một phong cách CSS để thay đổi con trỏ chuột:

.clickbox { 
    cursor: pointer; 
} 

dễ dàng phải không?