javascript实现部分内容的展开/收起

前端 投稿&转载 162浏览 0评论

我们经常可以看到有的网站的文章有个导读,摘要板块,但其内容确是和正文重复的,如果出于SEO的考虑需要保留这个部分,我们可以收起/展开一部分内容,来提升用户体验

HTML代码示例

默认收起

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #content {
      width: 500px;
      background-color: #ccc;
      line-height: 26px;
    }
    a {
      text-decoration: none;
      color: red;
    }
  </style>
</head>
<body onload="init()">
  <div id="content">
      2005年以后,互联网进入Web2.0时代,各种类似桌面软件的Web应用大量涌现,网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。以前会Photoshop和Dreamweaver就可以制作网页,现在只掌握这些已经远远不够了。
  </div>

  <script>
     function init(){
        var len = 60;      //默认显示字数
        var ctn = document.getElementById("content");  //获取div对象
        var content = ctn.innerHTML;                   //获取div里的内容

        //alert(content);
        var span = document.createElement("span");     //创建<span>元素
        var a = document.createElement("a");           //创建<a>元素
        span.innerHTML = content.substring(0,len);     //span里的内容为content的前len个字符

        a.innerHTML = content.length>len?"... 展开":"";  //判断显示的字数是否大于默认显示的字数    来设置a的显示
        a.href = "javascript:void(0)";

        a.onclick = function(){
            if(a.innerHTML.indexOf("展开")>0){      //如果a中含有"展开"则显示"收起"
              a.innerHTML = "<<&nbsp;收起";
              span.innerHTML = content;
            }else{
                a.innerHTML = "... 展开";
                span.innerHTML = content.substring(0,len);
            }
        }
        // 设置div内容为空,span元素 a元素加入到div中
        ctn.innerHTML = "";
        ctn.appendChild(span);
        ctn.appendChild(a);
     }
  </script>
</body>
</html>

默认展开

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#div1 {width: 600px; background: lightblue; margin: 0 auto;line-height: 26px;}
a {text-decoration: none;color: red;}
</style>
</head>
<body>
    <div id="div1">
      2005年以后,互联网进入Web2.0时代,各种类似桌面软件的Web应用大量涌现,网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。以前会Photoshop和Dreamweaver就可以制作网页,现在只掌握这些已经远远不够了。
        <a href="javascript:;"><<收起</a>
    </div>
</body>
<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个字符,并且在65个字符末尾添加 “。。。>>展开”
              oA=oDiv.getElementsByTagName('a');
              oA[0].onclick=move;
          }else{
              onOff=true;
              oDiv.innerHTML=old;
              oA=oDiv.getElementsByTagName('a');
              oA[0].onclick=move;
          }
      }
</script>
</html>

以上来源:

javascript实现一段文字展开、收起(默认展开)

javascript实现一段文字展开、收起(默认收起)

除此之外,更多的示例建议参考:

原生js实现新闻列表展开/收起全文功能

展开/收起按钮显示隐藏文字js代码

转载请注明:思享SEO博客 » javascript实现部分内容的展开/收起

扩展阅读

Canonical有没有必要写,作用大不大

刚刚仿站的时候见有人加了 不知道Canonical标签是干什么用的,这个对百度有用没有呢?看他们说对谷歌雅虎必应有用,对百度没用呢?...

页面如果有很多个H1标签有什么影响

网站建好了,但是查看源码发现一个页面有很多个H1标签,想问一下这样有没有什么不良影响,文章页中出现多个H1标签 该怎么处理比较好...

hreflang是什么标签,对优化有什么用

从近两年我个人的SEO服务项目情况看,有越来越多的公司需要做多语言网站优化。国内公司做多语种网站,以电商公司居多,要往外卖产品。国外公司也有不少要做中文网站,不过电子商务类的不多,大品牌、留学/移民之类的比较多。 如果涉及语言比较少,比如只有英语和中......

avatar
发表我的评论
取消评论

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址