1

当我单击一个按钮时，使用 onClick 功能，我将图像替换为另一个图像。代码是这样的

<a class="blue_button" onClick="javascript:loading.style.display='block';zip.style.visibility='hidden';"
href="javascript:getsupport('zip')" id="download">
<img id="zip" src="img/zip.png">
<img id="loading" src="img/loading.gif">
</a>

在CSS中我有这个：

    .blue_button{
    display:block;
    height:30px;
    margin-right:20px;
    float:left;
    width:110px;
    color:#FFF;
    font-size:12px;
        border-radius:4px;
        padding:0 23px 0 20px;
    }

        .blue_button img{
            position:relative;


top:5px;
        margin-right:7px;
    }

    .blue_button img#loading{
        display:none;
        float:left;
        top:-17px;
    }

它适用于所有浏览器，除了 IE9。如果我激活兼容模式，它可以工作，但我需要保持标准模式。

== 已解决 == 使用不显眼的 js。谢谢大家

window.onload = loading;
function loading()
{
    document.getElementById('download').onclick = function()
    {
        document.getElementById('zip').style.visibility = 'hidden';
        document.getElementById('loading').style.display = 'block';
    }
}
4

3 回答 3

1

我想我发现了问题：

onClick="javascript:loading.style.display='block';zip.style.visibility='hidden';"

onclick 事件不需要javascript:

如果您包含其余的 JavaScript，我也许可以对其进行测试。

你也有onclick和href。您可能只想使用其中之一。你可能想看看你可以在这里addEventListener()阅读更多关于它的信息。

另一方面，您的 CSS 类命名非常糟糕。你不想称它们为蓝色、红色等。这可以改变。你想保持它们的语义。

阅读：什么是语义类名称？

于 2012-10-09T13:24:12.107 回答
1

您正在使用一个名为加载的对象。但它不存在它的 DOM id。所以你需要首先使用 document.getElementById("loading") （或 querySelector）从页面中检索它。

尝试将您的代码更改为

onClick="document.getElementById("loading").style.display='block';onClick="document.getElementById("zip").style.visibility='hidden';"
于 2012-10-09T13:38:02.387 回答
0

正如@Allan 所说，你有太多事情要做，你依赖于副作用和范围重载

我会这样做：

纯JS

window.onload=function() {
  document.getElementById("download").onclick=function() {
    document.getElementById("loading").style.display='block';
   // use .display='none' to remove, 
   // visibility='hidden' to hide but leave the space
    document.getElementById("zip").style.display='none'; 
    getsupport('zip');
    return false;
  }
}

jQuery：

$(function() {
  $("#download").on("click",function() {
    $("#loading").show();
    $("#zip").hide(); 
    getsupport('zip');
    return false;
  });
});

两种情况下的 HTML：

<a class="blue_button" href="#" id="download"><img id="zip" src="img/zip.png"><img id="loading" src="img/loading.gif"></a>
于 2012-10-09T13:55:06.847 回答