如何在弹出窗口显示之前验证锚标记？

Question

我有一个带有一个图像标签的锚标签，我正在根据按钮单击动态更改锚标签内的图像。 button1 设置 Red.png 图像， button2 设置 Green.png 图像。我想验证锚标记内的哪个图像，如果它是 Green.png，我需要显示厚框，如果它是 Red.png，则不应执行任何操作。我该怎么做？

//我的aspx代码-带图片标签的锚标签

<a onclick="validate();" href="PopUpPage.aspx?KeepThis=true&TB_iframe=true&height=150&width=400"
      class="thickbox" id="AnchorImage" >
<img id="ColorImageButton" src="SiteImages/Red.png" runat="server" />
</a>

//两个按钮-按钮1设置红色图像，按钮2设置绿色图像

<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
<asp:Button ID="Button2" runat="server" onclick="Button2_Click" Text="Button" />

    protected void Button1_Click(object sender, EventArgs e)
    {
        ColorImageButton.Src = "~/SiteImages/Red.png";
    }

    protected void Button2_Click(object sender, EventArgs e)
    {
        ColorImageButton.Src = "~/SiteImages/Green.png";
    }

更新：根据答案，我添加了一个 JavaScript 来删除链接，但我仍然有厚框的黑屏背景

function validate() {

    if (document.getElementById('<%=ColorImageButton.ClientID%>').src.indexOf('Red.png') >= 0) {
                         document.getElementById('AnchorImage').removeAttribute('href');
    }

Answer 1

使用 Javascript，您可以执行以下操作：

1. 将 onclick 处理程序附加到锚点，如下所示：

   <a onclick="validate();" href="PopUpPage.aspx?KeepThis=true&TB_iframe=true&height=150&width=400"
     class="thickbox" id="AnchorImage"  >
   <img id="ColorImageButton" src="SiteImages/Red.png" runat="server" />
   </a>
   

2. 定义validate函数：

   ​function validate()
   {
      //If image is red; change the href value to a hash sign
      //so it doesn't do anything
      if(document.getElementById('<%=ColorImageButton.ClientID%>').src.indexOf('Red.png')>=0)
      {
         document.getElementById('AnchorImage').href='#';
      }
   }​