js页面传值实践

参考链接：

https://www.cnblogs.com/lyggqm/p/5688028.html#commentform

https://www.cnblogs.com/ZJTL/p/12161707.html

最近做网页，想要做一个百度文库类似的功能，多个链接跳转页面，但仔细想了想，那么多链接要跳转页面，不可能建那么多的页面吧，于是在网上看了许多文章，像动态生成html页面之类，最后发现好像不用那么复杂。
只要每一个链接都跳转到相同的一个子页面。然后再根据需要修改子页面的内容不就好了吗，最后瞎胡乱搞，勉强实现了我想要的效果

role.html

将参数index传值给role_child页面，靠判断index的值来对子页面内容进行修改

<div>
<a href="role_child.html?indext=1"><img src="image/tianming.jpeg" alt=""></a>
</div>

role_child.html

<div class="article">
<h3 id="tlt"><!-- 荆天明 --></h3>            
</div>

role_child.js

var loc=location.href;
 console.log(loc);/*当前显示的文档的完整 URL*/
var n1=loc.length;
var n2=loc.indexOf("=");/*获得等号后面的内容*/
var index=decodeURI(loc.substr(n2+1, n1-n2));/*获得index值*/
/*encodeURI() 函数可把字符串作为 URI 进行编码*/
/*decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。*/
 console.log(n1);
 console.log(n2);
console.log(index);
var title=document.getElementById('tlt');
if(index==1){
     tlt.innerHTML="荆天明";
}
else if(index==2){
    tlt.innerHTML="高渐离";
}

以博客记录点滴，便日后参考