由于介绍比较多,可以将部分文字隐藏,点击更多按钮,将全部文字显示出来
同时,如果文字全部显示出来,就显示“收缩”
直接上js代码
1 function showmore(contentid){
2 var len = 300; //默认显示字数
3 var ctn = document.getElementById(contentid); //获取div对象
4 var content = ctn.innerHTML; //获取div里的内容
5 content2 = content.replace(/(^\s*)|(\s*$)/g, "");
6 content2= content2.replace(/<[^>]+>/g,"");//去掉所有的html标记
7
8 //alert(content);
9 var span = document.createElement("span"); //创建<span>元素
10 var a = document.createElement("a"); //创建<a>元素
11 span.innerHTML = content2.substring(0,len); //span里的内容为content的前len个字符
12
13 a.innerHTML = content.length>len?"... 展开":""; ////判断显示的字数是否大于默认显示的字数 来设置a的显示
14 a.href = "javascript:void(0)";//让a链接点击不跳转
15
16 a.onclick = function(){
17 if(a.innerHTML.indexOf("展开")>0){ //如果a中含有"展开"则显示"收起"
18 a.innerHTML = "<< 收起";
19 span.innerHTML = content;
20 }else{
21 a.innerHTML = "... 展开";
22 span.innerHTML = content.substring(0,len);
23 }
24 }
25 // 设置div内容为空,span元素 a元素加入到div中
26 ctn.innerHTML = "";
27 ctn.appendChild(span);
28 ctn.appendChild(a);
29 }
前台调用的时候写上:
showmore('aboutuscontent');//aboutuscontent是id名