Question

我遇到问题，我的网站上有大约200个可点击按钮。所有按钮的设计都是一样的：

<div>
<asp:hyperlink> //or LinkButton
</div>

Div是按钮的背景样式，Hyperlink / LinkButton是按钮的文本。当然，目前只有文本可以点击，所以如果单击“文本”但“按下”按钮，则单击时会失败。

我想改变这个问题，问题是，确保背景按钮本身可以点击但是没有新写200个按钮的最快和最简单的方法是什么？！

Answer 1

这是一个纯CSS解决方案

使您的标记表现为块级元素，并为其提供与父元素相同的大小。

这是jsfiddle

<强> HTML

<div class="wholediv">
    <a href="http://www.google.com">Your link</a>
</div>

的 CSS

.wholediv{ width: 100px; height: 100px; background-color: #efefef; } .wholediv a { width: 100px; height: 100px; display:block; background-color: pink; }

Answer 2

我认为你可以使用：

<div onclick="javascriptFunction()">
Button Text
</div>

Answer 3

您可以使用jQuery为所有DIV设置单击事件处理程序，如下所示：

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的：

$("div").click(function (event) {
    alert(event.currentTarget.id);
});

这是jsFiddle。

现在要获取服务器端逻辑，您需要让jQuery click事件处理程序通过__doPostBack()调用回发送回服务器，如下所示：

$("div").click(function (event) {
    __doPostBack(event.currentTarget.id,'');
});

最后，在服务器端，您需要使用__EVENTTARGET对象中的Request值来确定触发回发的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 
    }
}

Answer 4

你可以使用jQuery来做到这一点。请参阅以下代码：

    <div id="button">
         <asp:hyperlink> //or LinkButton
    </div>

    $("#button").click(function (event) {
         // do whatever you want.
    });

如何使div可点击

4 个答案: