网页设计中js如何实现页面固定主标题+副标题切换显示

  • 内容
  • 评论
  • 相关

如本站主标题是“IT技术资料分享”,当你进入网站首页的时候鼠标放在页面标题栏时会发现仅显示“IT技术资料分享”,当你点击进入网站内页,如文章页,分类页等你会发现在网站标题栏上除了显示当前页面标题外后缀还有“|IT技术资料分享”固定的一个网站主标题,这样做对于网站SEO有很大的好处,那么该如何实现呢?

01

我们可以通过js实现

代码如下:

<script type="text/javascript">
var title=new Array(5);
title[0]="第一个副标题";
title[1]="下一个副标题";
title[2]="第三个副标题";
title[3]="第四个副标题";
title[4]="最后一个副标题";
var indexTitle=Math.floor(Math.random()*title.length); //获取一个随机的整数
onload=function change(){ //绑定在onload事件当中,只有在加载页面的时候标题才会发生变化
 var curTitle=title[indexTitle]; //获取数组的指定项
 window.document.title+="-"+curTitle;  //更改当前页的标题
 
}
</script>

这里我们实现的是一个主标题+多个副标题,每次刷新的时候副标题随机变化。

这里重点是

window.document.title+="-"+curTitle;

这段代码,其中“+=”如果漏掉+,将只显示等号后面的内容,也就是“-+curTitle(副标题的内容)”;

IT技术资料分享,个人整理自互联网

每天学一点,基础很重要