JavaScript实现广告显隐切换功能

作者:小括号时间:2026-10-29 12:06:23浏览:403

本文通过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程序设计有所帮助。

作者最新文章