Html 页⾯对于导航及底部栏等公共部分的引⽤
对于⼤多数⽹站来说，导航栏和底部的信息栏在多个页⾯中都是通⽤的。如果将这些代码放在每⼀个页⾯的html中，会显得代码冗余，⽽且修改起来也极为不⽅便。
所以如果将这些代码放在单独的页⾯中，在其他页⾯直接引⼊的话，不仅代码量减少，⽽且在公共部分需要修改时，也只需要修改⼀处就可以了。
引⼊页⾯公共部分的步骤：
1. ⾸先要将公共部分单独放在⼀个html页⾯中。这个页⾯必须是⼀个完整的页⾯，包含head,body等标签，引⼊的css,js等都需要在这个页⾯中引⼊。
也就是说，这个页⾯单独打开的情况下， 也是⼀个可以正常显⽰的页⾯。例如：
2. 在需要引⼊公共部分的页⾯，使⽤ iframe来引⼊公共部分 head.html
宽⾼根据⾃⼰的需要去修改。
frameborder是隐藏框架周围的边框。scrolling属性规定是否在 iframe 中显⽰滚动条，这⾥不显⽰。
网站底部代码js特效
这样完成以后，公共部分就被成功引⼊了页⾯中。
问题：
但是我⼜发现了⼀个问题，导航列表中的a标签点击⽆法跳转到href中的页⾯中。
例如：我的品牌介绍是这样的：
1.引⼊以后发现a标签点击不跳转，查资料⽤了下⾯的⽅法，就可以正常跳转了。
给iframe加上name属性并赋值，然后a标签添加属性target，值等于iframe的name值:
这样的话a标签就可以跳转了。
2.我还希望导航栏能够实现，点击某个导航标题时，在页⾯跳转的同时，对应的标题能改变颜⾊以此突出于其他标题。例如：
<iframe  src ="/path/head.html" width ="100%"; height ="94px" frameborder ="0" scrolling ="no" name ="headFrame"></iframe >
<a  href ="pinpai/index.html"></a >
<a  href ="pinpai/index.html" target ="headFrame"></a >
本以为这样的效果很好实现，但是因为点击以后页⾯就跳转到了⼀个全新的页⾯，在全新的页⾯中，导航栏还是没有改变，试了很多⽅式，最后⽤sessionStorage的⽅式记录点击点，实现了这个效果。
具体的代码实现是：
  1. 给每个a标签都添加不同的id，当点击a标签时，将点击的id通过sessionStorage存储到本地。
  2. 在页⾯加载的同时，从本地查询是否存在id，存在的话， 将这个id对应的a标签改变字体颜⾊。
// 从本地存储中获取存储的id
var aClick = Item('aClick');
if(aClick){
//改变id对应的a标签的字体颜⾊以及加粗
$('#'+aClick).css('color','green');
$('#'+aClick).css('font-weight','400');
}
//点击时存储id
$('.left').find('a').on('click',function(){
sessionStorage.setItem('aClick',$(this).attr('id'));
})
当然，上⾯的代码直接写在公共⽂件head.html中就可以了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。