[英]How to make a div clickable
I have a problem, I have around 200 clickable buttons on my website. 我有一个问题,我的网站上有大约200个可点击按钮。 All Buttons are designed like the same:
所有按钮的设计都是一样的:
<div>
<asp:hyperlink> //or LinkButton
</div>
The Div is the background-style of the button and the Hyperlink / LinkButton is the text of the button. Div是按钮的背景样式,Hyperlink / LinkButton是按钮的文本。 Of course only the Text is clickable right at the moment, so if you click UNDER the Text but ON the Button, you fail with clicking.
当然,目前仅可单击文本,因此,如果单击“文本”下但在“按钮”上,单击将失败。
I wanna change this, the problem is, what is the fastest and easiest way to be sure the background-button itself is clickable but not writing 200 buttons new?! 我想改变这个问题,问题是,确保背景按钮本身是可点击的但是没有新写200个按钮的最快和最简单的方法是什么?!
Here is a pure CSS solution 这是一个纯CSS解决方案
Make your tag behave as a block level element and give it the same size as to the parent element. 使标记的行为像块级元素,并使其大小与父元素相同。
Here is a jsfiddle 这是一个jsfiddle
HTML HTML
<div class="wholediv">
<a href="http://www.google.com">Your link</a>
</div>
CSS CSS
.wholediv{
width: 100px;
height: 100px;
background-color: #efefef;
}
.wholediv a {
width: 100px;
height: 100px;
display:block;
background-color: pink;
}
I think you can just use: 我想你可以使用:
<div onclick="javascriptFunction()">
Button Text
</div>
You can use jQuery to setup a click event handler for all DIVs, like this: 您可以使用jQuery为所有DIV设置单击事件处理程序,如下所示:
HTML: HTML:
<div style="background-color: red; width: 50px; text-align: center;" id="one">
<a>Hello</a>
</div>
<br/>
<div style="background-color: yellow; width: 50px; text-align: center;" id="two">
<a>World</a>
</div>
JavaScript: JavaScript的:
$("div").click(function (event) {
alert(event.currentTarget.id);
});
Here is a jsFiddle . 这是一个jsFiddle 。
Now to get the server-side logic, you need to have the jQuery click event handler invoke post back to the server via the __doPostBack()
, like this: 现在要获得服务器端逻辑,你需要让jQuery click事件处理程序通过
__doPostBack()
调用post回服务器,如下所示:
$("div").click(function (event) {
__doPostBack(event.currentTarget.id,'');
});
Finally, on the server-side you will need to use the __EVENTTARGET
value in the Request
object to determine which UI element triggered the post back, like this: 最后,在服务器端,您需要使用
Request
对象中的__EVENTTARGET
值来确定触发回发的UI元素,如下所示:
if (IsPostBack)
{
string ControlID = string.Empty;
if (!String.IsNullOrEmpty(Request.Form["__EVENTTARGET"]))
{
ControlID = Page.Request.Params["__EVENTTARGET"];
Control postbackControl = Page.FindControl(ControlID);
// Do something with control, that caused post back, here
}
}
You can do it using jQuery. 您可以使用jQuery。 See the following code:
请参阅以下代码:
<div id="button">
<asp:hyperlink> //or LinkButton
</div>
$("#button").click(function (event) {
// do whatever you want.
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.