Javascript div show hide onclick with image sprite

我正在尝试使用javascript编写带有图像的div交换。我已经创建了两个div。一个是显示块，第二个是显示无。当用户单击图像时，onclick应该隐藏显示的div并在其所在位置显示隐藏的div

当用户单击相同的图像位置时，图像将基于xy值移动，并且div将再次交换。我似乎无法让它正常工作。当我没有在任何一个div上设置显示时，我可以点击调出div，但这会使两个div都显示堆叠。我快到了，但找不到我缺少的东西，一次只显示一个div。有没有更好的办法让我这么做？请帮忙

<div class="row" style="margin-top: 15px;">
<div style="border:1px dashed #CCC;background:#fff;padding:10px 0px;">
<div style="text-align:center;">
<div id="lifehacks" onclick="lhtrial();">
<div id="trialarea">
<p style="background: url('images/LH_Trial.png') 0 0;background-repeat: no-repeat; height: 75px;">&nbsp;</p>
<p><span id="lhtext"><span style="color:#999; font-size:12px;padding:20px 30px 0 30px;">(Click Above To Opt-In To LifeHacks)</span></span></p>
</div>
<div id="trialarea2">
<p style="background: url('images/LH_Trial.png') 0 -75px;background-repeat: no-repeat; height: 75px;">&nbsp;</p>
<p><span id="lhtext"><span style="color:#999; font-size:12px;padding:20px 30px 0 30px;">(Click Above If You Want To Opt-Out Of LifeHacks)</span></span></p>
</div>
</div>
</div>
</div>
</div>

（点击上面选择加入LifeHacks）


（如果您想退出LifeHacks，请单击上面的按钮）

以下是我的javascript：

<script>

ele = document.getElementById("trialarea");
function lhtrial(){
if(ele.style.display == "block") {
    ele.style.display = "none";
    text.innerHTML = "show";
}
else {
    ele.style.display = "block";
    text.innerHTML = "hide";
}
}
</script>

ele=document.getElementById（“trialarea”）；
功能试验（）{
如果（ele.style.display==“块”）{
ele.style.display=“无”；
text.innerHTML=“显示”；
}
否则{
ele.style.display=“块”；
text.innerHTML=“隐藏”；
}
}

以下代码应该适合您，尽管您最好使用HTML中的内联而不是内联来附加事件。您还在HTML中标识了两次id

lhtext

，这是不允许的

函数lhtrial（）{
ele=document.getElementById（“trialarea”）；
ele2=document.getElementById（“trialarea2”）；
如果（ele.style.display==“无”）{
ele.style.display=“块”；
ele2.style.display=“无”；
}否则{
ele.style.display=“无”；
ele2.style.display=“块”；
}
}

#lhimage1{
背景：url（'http://lorempixel.com/400/200/sports/1/') 0 0;
背景重复：无重复；
高度：75px；
}
#lhimage2{
背景：url（'http://lorempixel.com/400/200/sports/2/') 0 0;
背景重复：无重复；
高度：75px；
}
#三亚目2{
显示：无；
}

（点击上面选择加入LifeHacks）


（如果您想退出LifeHacks，请单击上面的按钮）

函数lhtrial（）{
ele=document.getElementById（“trialarea”）.style.display；
如果（元素==“块”）{
document.getElementById（“trialarea”）.style.display='none'；
document.getElementById（“trialarea2”）.style.display='block'；
text.innerHTML=“显示”；
}
否则{
document.getElementById（“trialarea”）.style.display='block'；
document.getElementById（“trialarea2”）.style.display='none'；
text.innerHTML=“隐藏”；
}
}

（点击上面选择加入LifeHacks）


（如果您想退出LifeHacks，请单击上面的按钮）

按钮

非常感谢Aleksandar！看起来除了图像交换外，其他一切都正常工作，但是我想我需要调整我现有的代码来删除主div的背景。工作得像个魔咒Dave！！非常感谢！