如何使DIV可点击的?(how to make div click-able?)

2019-07-29 08:48发布

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

对于像上述格,当鼠标,它应该成为光标:指针,点击后,火

javascript函数,该怎么做工作?

编辑 :如何改变div的背景颜色,当鼠标上?

再次编辑 :如何使第一跨度的宽度= 120像素的好像不是在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:

我建议使用一个CSS类名为clickbox和使用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;
}

很简单,不是吗?



Answer 5:

添加的onclick属性

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

要得到光标改变使用CSS的光标规则 。

div[onclick] {
  cursor: pointer;
}

该选择使用一个属性选择器不能在IE的一些版本。 如果你想支持那些版本,添加一个类你的股利。



Answer 6:

当你更新你的问题,这里是一个obtrustive例如:

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>

这将改变背景颜色,以及



Answer 8:

其中最简单的是:

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


Answer 9:

如果这个div是一个功能,我建议使用光标:指针在你的风格般的风格=“光标:指针”和可以使用的onclick功能。

像这样

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

但我建议你使用JS框架喜欢的jQuery或ExtJS的



文章来源: how to make div click-able?