- A+
所属分类:Web前端
由于介绍比较多,可以将部分文字隐藏,点击更多按钮,将全部文字显示出来
同时,如果文字全部显示出来,就显示“收缩”
直接上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名