如何让div点击？

Question

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

对于像上面这样的div,当鼠标开启时,它应该变成光标:指针,当点击时,触发一个

javascript函数,该怎么做？

编辑:以及如何在鼠标开启时更改div的背景颜色？

编辑再次:如何使第一个跨度的宽度= 120px？似乎不能在Firefox中工作

Answer 1

给它一个像"某事"的ID,然后:

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

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

更改背景颜色(根据您更新的问题):

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

Answer 2

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

是最简单的工作方式.

当然,在最终的解决方案中,你应该将标记与样式(css)和行为(javascript)分开 - 在列表上阅读除了不仅解决这个特定问题而且在标记设计中的良好实践.

Answer 3

我建议使用jQuery:

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

Answer 4

其中最简单的：

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

Answer 5

我建议使用一个名为clickbox的CSS类,并使用jQuery激活它:

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

现在,您唯一要做的就是将div标记为可点击并提供链接:

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

加上CSS样式来改变鼠标光标:

.clickbox {
    cursor: pointer;
}

容易,不是吗？