上一篇已经介绍文字默认收起,这篇介绍javascript
实现一段文字展开、收起(默认展开)
html:
<div id="div1">
2005年以后,互联网进入Web2.0时代,各种类似桌面软件的Web应用大量涌现,网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。以前会Photoshop和Dreamweaver就可以制作网页,现在只掌握这些已经远远不够了。
<a href="javascript:;"><<收起</a>
</div>
css:
<style type="text/css">
#div1 {width: 600px; background: lightblue; margin: 0 auto;line-height: 26px;}
a {text-decoration: none;color: red;}
</style>
javascript:
<script>
var oDiv=document.getElementById('div1');//获取文字的盒子
var oA=oDiv.getElementsByTagName('a');//获取 a 标签
var onOff=true;
var old='';
oA[0].onclick=function move(){ //a 链接点击后执行 move 函数
if(onOff){ //判断
onOff=false;
old=oDiv.innerHTML;
oDiv.innerHTML=oDiv.innerHTML.substring(0,65)+'...<a href="javascript:;"> >>展开 </a>';//默认显示65个字符,字符末尾添加 “...>>展开”
oA=oDiv.getElementsByTagName('a');
oA[0].onclick=move;
}else{
onOff=true;
oDiv.innerHTML=old;
oA=oDiv.getElementsByTagName('a');
oA[0].onclick=move;
}
}
</script>