javascript 控制 html元素 显示/隐藏实现代码


Posted in Javascript onSeptember 01, 2009

1。编写js函数
<script type="text/javascript">
function display(y){$(y).style.display=($(y).style.display=="none")?"":"none";}
function $(s){return document.getElementById(s);}
</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="layer" style="display:none;">广告</div>
<input type="botton" onclick="display(layer)">
二: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";
方法一隐藏后 页面的位置还被控件占用 只是不显示
方法二隐藏后 页面的位置不被占用

Javascript 相关文章推荐
JavaScript检测上传文件大小的方法
Jul 22 Javascript
Bootstrap源码解读按钮(5)
Dec 23 Javascript
jQuery实现给input绑定回车事件的方法
Feb 09 Javascript
利用js定义一个导航条菜单
Mar 14 Javascript
validationEngine 表单验证插件使用实例代码
Jun 15 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
Oct 25 Javascript
JS实现运动缓冲效果的封装函数示例
Feb 18 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
Feb 28 Javascript
解决vue中修改export default中脚本报一大堆错的问题
Aug 27 Javascript
微信上传视频文件提示(推荐)
Nov 22 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
Dec 04 Javascript
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 Javascript
jsTree树控件(基于jQuery, 超强悍)[推荐]
Sep 01 #Javascript
JavaScript 继承详解 第一篇
Aug 30 #Javascript
JavaScript 应用技巧集合[推荐]
Aug 30 #Javascript
用cssText批量修改样式
Aug 29 #Javascript
javascript appendChild,innerHTML,join性能比较代码
Aug 29 #Javascript
IE 条件注释详解总结(附实例代码)
Aug 29 #Javascript
基于jQuery的ajax功能实现web service的json转化
Aug 29 #Javascript
You might like
几种有用的变型 PHP中循环语句的用法介绍
2012/01/30 PHP
php中使用cookie来保存用户登录信息的实现代码
2012/03/08 PHP
hadoop常见错误以及处理方法详解
2013/06/19 PHP
php中文验证码实现示例分享
2014/01/12 PHP
Yii实现多数据库主从读写分离的方法
2014/12/29 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
Maps Javascript
2007/01/22 Javascript
Tinymce+jQuery.Validation使用产生的BUG
2010/03/29 Javascript
javascript 正则表达式相关应介绍
2012/11/27 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
浅谈Node.js中的定时器
2015/06/18 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
2017/12/06 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
2018/08/19 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
微信小程序可滑动周日历组件使用详解
2019/10/21 Javascript
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
2021/03/01 jQuery
Python实现在线程里运行scrapy的方法
2015/04/07 Python
python3正则提取字符串里的中文实例
2019/01/31 Python
PyQtGraph在pyqt中的应用及安装过程
2019/08/04 Python
pandas将多个dataframe以多个sheet的形式保存到一个excel文件中
2019/10/10 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
Opencv python 图片生成视频的方法示例
2020/11/18 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
英国奢侈皮具品牌:Aspinal of London
2018/09/02 全球购物
《蓝色的树叶》教学反思
2014/02/24 职场文书
群众路线领导班子四风对照检查材料
2014/09/27 职场文书
个人道歉信大全
2019/04/11 职场文书
写自招自荐信的绝招!
2019/04/19 职场文书
2019年世界儿童日宣传标语
2019/11/22 职场文书
Java详细解析==和equals的区别
2022/04/07 Java/Android