JS控制DIV的显隐 – 码农在线

JS控制DIV的显隐

控制DIV的显隐,给出一个简单的例子。

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>div隐藏与显示</title><style type=text/css>#menus { background-color: #c4cff0; }</style><script language=javascript>function Layer_HideOrShow(cur_div){ var current=document.getElementById(cur_div); if(current.style.visibility=="hidden") { current.style.visibility ="visible"; } else { current.style.visibility ="hidden"; }}</script></head><body><p> </p><table border="0" width="153" cellpadding="0" style="border-collapse: collapse" id="table1" height="101"><tr> <td> <a href="#" onclick="Layer_HideOrShow('menus');"><img border="0" src="http://www.shuifutour.com/images/456.gif" width="153" height="25"></a></td></tr><tr> <td> <div id="menus"> <table border="0" width="100%" cellpadding="0" style="border-collapse: collapse" height="150" id="table2"> <tr> <td> </td> </tr> </table> </div></td></tr></table></body></html>====================<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><script language="JavaScript" type="text/JavaScript"><!--function toggle(targetid){ if (document.getElementById){ target=document.getElementById(targetid); if (target.style.display=="block"){ target.style.display="none"; } else { target.style.display="block"; } }}--></script><style type="text/css"><!--#div1{background-color:#000000;height:400px;width:400px;display:none;}--></style></head><body><input type="button" id="butn" value="显示/隐藏" onclick="toggle('div1')" /><center><div id="div1"></div></center>居中的DIV</body></html>=======================3.javascript 控制 html元素 显示/隐藏1。编写js函数<script type="text/javascript"> function display(id){ var traget=document.getElementById(id); if(traget.style.display=="none"){ traget.style.display=""; }else{ traget.style.display="none"; } }</script>2. 要显示/隐藏的html元素加上 id 属性<table> <tr id="menu" > <td>控制这个tr的显示/隐藏</td> </tr></table>3,添加按钮,链接等触发 js 函数<input type="button" onclick="display('menu')" value="显示/隐藏"/><a href="#" onclick="display('menu')" >显示/隐藏</a>javascript显示隐藏层<div id="" style="display:none;">广告</div><input type="botton" onclick="函数"><script language=javascript>function 函数{if(thisdiv.style.display=='none'){ thisdiv.style.display=""}elsethisdiv.style.display="none"}</script>你先给div 取个ID=“AA”thisdiv=AAjavascript隐藏/显示表单对象javascript隐藏/显示表单对象 [SCRIPT language=JavaScript]function expandIt(el) { whichEl =document.getElementById(el) if (whichEl.style.display == 'none') { whichEl.style.display = ''; } else { whichEl.style.display = 'none'; } }[/SCRIPT]el是对象的id,不管是tr或者table等等先设置一下id,然后进行调用。例:[a onclick="expandIt('ttchild'); return false" href="#" ]try it[/a][tr id="ttchild"][td width="18"]Example[/td][/tr]使用时把[]变成<>javascript控制页面控件隐藏显示的两种方法javascript控制页面控件隐藏显示的两种方法,方法的不同之处在于控件隐藏后是否还在页面上占位方法一:document.all["PanelSMS"].style.visibility="hidden"; document.all["PanelSMS"].style.visibility="visible";方法二:document.all["PanelSMS"].style.display="none"; document.all["PanelSMS"].style.display="inline";方法一隐藏后 页面的位置还被控件占用 只是不显示 类似于.net验证控件的Display=Static方法二隐藏后 页面的位置不被占用 类似于.net验证控件的Display=Dynamic====================这个方法来我是从一个boblog模板上找到的,其实网络上也可以搜索到;只是网络上不看效果的转载让人难辩代码的错对和方便。用这个方法比用《给zblog再增3个功能:防刷、收缩侧栏、复制加版权》的效果要好,纯css隐藏div会刷新页面,但用js就不会了。  js代码如下,新建一个txt文件,复制进去,保存并修改文件后缀为js(例open.js)即可。我是把这个文件放在zblog的SCRIPT文件夹里,这里js比较多…… 程序代码function showhidediv(id){ try{ var sbtitle=document.getElementById(id); if(sbtitle){ if(sbtitle.style.display=='block'){ sbtitle.style.display='none'; }else{ sbtitle.style.display='block'; } } }catch(e){}