[英]how to make div click-able?
<div><span>shanghai</span><span>male</span></div>
For div like above,when mouse on,it should become cursor:pointer,and when clicked,fire a 对于像上面这样的div,当鼠标开启时,它应该变成光标:指针,当点击时,触发一个
javascript function,how to do that job? javascript函数,该怎么做?
EDIT : and how to change the background color of div when mouse is on? 编辑 :以及如何在鼠标开启时更改div的背景颜色?
EDIT AGAIN :how to make the first span's width=120px?Seems not working in firefox 编辑再次 :如何使第一个跨度的宽度= 120px?似乎不能在Firefox中工作
Give it an ID like "something", then: 给它一个像“某事”的ID,然后:
var something = document.getElementById('something');
something.style.cursor = 'pointer';
something.onclick = function() {
// do something...
};
Changing the background color (as per your updated question): 更改背景颜色(根据您更新的问题):
something.onmouseover = function() {
this.style.backgroundColor = 'red';
};
something.onmouseout = function() {
this.style.backgroundColor = '';
};
<div style="cursor: pointer;" onclick="theFunction()">
is the simplest thing that works. 是最简单的工作方式。
Of course in the final solution you should separate the markup from styling (css) and behavior (javascript) - read on it on a list apart for good practices on not just solving this particular problem but in markup design in general. 当然,在最终的解决方案中,你应该将标记与样式(css)和行为(javascript) 分开 - 在列表上阅读除了不仅解决这个特定问题而且在标记设计中的良好实践。
I suggest to use jQuery: 我建议使用jQuery:
$('#mydiv')
.css('cursor', 'pointer')
.click(
function(){
alert('Click event is fired');
}
)
.hover(
function(){
$(this).css('background', '#ff00ff');
},
function(){
$(this).css('background', '');
}
);
I suggest to use a CSS class called clickbox and activate it with jQuery: 我建议使用一个名为clickbox的CSS类,并使用jQuery激活它:
$(".clickbox").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
Now the only thing you have to do is mark your div as clickable and provide a link: 现在,您唯一要做的就是将div标记为可点击并提供链接:
<div id="logo" class="clickbox"><a href="index.php"></a></div>
Plus a CSS style to change the mouse cursor: 加上CSS样式来改变鼠标光标:
.clickbox {
cursor: pointer;
}
Easy, isn't it? 容易,不是吗?
add the onclick attribute 添加onclick属性
<div onclick="myFunction( event );"><span>shanghai</span><span>male</span></div>
To get the cursor to change use css's cursor rule . 要使光标更改,请使用css的游标规则 。
div[onclick] {
cursor: pointer;
}
The selector uses an attribute selector which does not work in some versions of IE. 选择器使用属性选择器,该选择器在某些版本的IE中不起作用。 If you want to support those versions, add a class to your div.
如果要支持这些版本,请在div中添加一个类。
As you updated your question, here's an obtrustive example: 当您更新问题时,这是一个令人瞩目的例子:
window.onload = function()
{
var div = document.getElementById("mydiv");
div.style.cursor = 'pointer';
div.onmouseover = function()
{
div.style.background = "#ff00ff";
};
}
<div style="cursor: pointer;" onclick="theFunction()" onmouseover="this.style.background='red'" onmouseout="this.style.background=''" ><span>shanghai</span><span>male</span></div>
这也会改变背景颜色
最简单的是:
<div onclick="location.href='where.you.want.to.go'" style="cursor:pointer"></div>
If this div is a function I suggest use cursor:pointer in your style like style="cursor:pointer" and can use onclick function. 如果这个div是一个函数,我建议在你的样式中使用cursor:pointer,如style =“cursor:pointer”,并且可以使用onclick函数。
like this 像这样
<div onclick="myfunction()" style="cursor:pointer"></div>
but I suggest you use a JS framework like jquery or extjs 但我建议你使用像jquery或extjs这样的JS框架
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.