本文通过JavaScript代码演示如何实现网页广告的动态显示与隐藏功能。利用DOM元素样式属性控制可见性,并通过点击事件触发状态切换,实现关闭与显示按钮的文字动态更新,为前端交互开发提供基础参考。
JavaScript实现广告显隐切换功能
本文通过具体实例介绍如何使用JavaScript实现网页广告的动态显示与隐藏效果,供读者参考学习。
具体的JavaScript实现代码如下:
<script language="javascript">
<!--
function display(){
if(googlead.style.visibility == 'visible'){
googlead.style.visibility ='hidden' ;
document.getElementById('words').innerHTML='关闭';
return true;
}
else{
googlead.style.visibility='visible';
document.getElementById('words').innerHTML='显示';
return false;
}
}
//-->
</script>
对应的HTML结构代码如下:
<div id="googlead" style="margin-bottom:5px;width:728px;height:90px;float:left;visibility:visible">换客网广告...</div>
<div id="myid" ><span id="words" onclick="return display()">关闭</span></div>
希望上述内容对掌握JavaScript程序设计有所帮助。