展开/收起按钮显示隐藏文字js代码
2016-09-14 09:38
555 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{padding:0;margin: 0;} .pn{width:400px; margin: 200px auto 0; background-color: #ddd; text-align: center;padding:0 100px;} .slide a{display: block;width: 100px;height: 30px;line-height:30px; text-align:center;margin:0 auto;background-color: #f00; text-decoration: none;color:#fff;} </style> </head> <body> <div class="pn"> <p>博主简介</p> <p>湖南人,90后,爱笑的女娃</p> <div class="hpn" id="mm" style="display:none;"> <p>特点:人长得很特很特点</p> <p>爱好:看电影睡觉爬山</p> </div> </div> <p class="slide"><a href="javascript:showdiv();" id="strhref" class="btn-show">展开</a></p> <script type="text/javascript"> function showdiv(){ document.getElementById('mm').style.display = 'block'; document.getElementById('strhref').innerHTML="收起"; document.getElementById('strhref').href="javascript:hidediv()"; } function hidediv(){ document.getElementById('mm').style.display = 'none'; document.getElementById('strhref').innerHTML="展开"; document.getElementById('strhref').href="javascript:showdiv()"; } </script> </body> </html>
相关文章推荐
- 一段JS代码,点击按钮显示一块区域,再点击则隐藏这块区域
- 如何实现js展开收起(折叠)效果呢?例如:一段内容过长了,我限制他显示为20个字内,但是超出了20的就先用省略号代替,然后后面添加一个展开,点击展开后就显示所有的内容,这时候展开按钮就变成了 折叠按钮
- Vue.js 点击按钮显示/隐藏内容的实例代码
- js隐藏与显示回到顶部按钮及window.onscroll事件应用
- JS代码解决层显示/隐藏问题
- Ferris教程学习笔记:js示例2.14 单一按钮显示/隐藏 乐曲播放列表
- MSCRM2011 通过JS脚本操作ribbon按钮(显示隐藏、是否可用等)
- Jquery 点击按钮显示和隐藏层的代码
- Dynamics CRM2011中通过JS脚本方式显示和隐藏ribbon中的自定义按钮
- 基于jquery显示隐藏按钮实现代码
- 跨平台移动开发 Xuijs超轻量级的框架 Dom与Event简洁代码实现文本展开收起
- js小技巧 显示跟隐藏文字特效
- Wipe In and Wipe Out 抹进、抹出(动画显示、动画隐藏)(展开、折叠)(拉下、收起)
- jQuery(js)获取文字宽度(显示长度)示例代码
- Dynamics CRM2011中通过JS脚本方式显示和隐藏ribbon中的自定义按钮
- mlellipsis.js-实现多行文字溢出隐藏显示省略号
- jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
- 一段自己不错的Js循环层显示或隐藏代码
- 用JS+CSS写左侧可隐藏的展开、折叠菜单代码
- JS实现默认显示部分文字点击按钮显示全部内容