對於大多數網站來說，導航欄和底部的資訊欄在多個頁面中都是通用的。如果將這些程式碼放在每一個頁面的html中，會顯得程式碼冗餘，而且修改起來也極為不方便。
所以如果將這些程式碼放在單獨的頁面中，在其他頁面直接引入的話，不僅程式碼量減少，而且在公共部分需要修改時，也只需要修改一處就可以了。

引入頁面公共部分的步驟：
1. 首先要將公共部分單獨放在一個html頁面中。這個頁面必須是一個完整的頁面，包含head,body等標籤，引入的css,js等都需要在這個頁面中引入。
也就是說，這個頁面單獨開啟的情況下， 也是一個可以正常顯示的頁面。例如：

2. 在需要引入公共部分的頁面，使用 iframe來引入公共部分 head.html

<iframe src="/path/head.html" width="100%"; height="94px" frameborder="0" scrolling="no" name="headFrame"></iframe>

寬高根據自己的需要去修改。
frameborder是隱藏框架周圍的邊框。scrolling屬性規定是否在 iframe 中顯示滾動條，這裡不顯示。
這樣完成以後，公共部分就被成功引入了頁面中。

問題：

但是我又發現了一個問題，導航列表中的a標籤點選無法跳轉到href中的頁面中。
例如：我的品牌介紹是這樣的：

<a href="pinpai/index.html"
 
></a>

1.引入以後發現a標籤點選不跳轉，查資料用了下面的方法，就可以正常跳轉了。
給iframe加上name屬性並賦值，然後a標籤新增屬性target，值等於iframe的name值:

<a href="pinpai/index.html" target="headFrame"></a>

這樣的話a標籤就可以跳轉了。

2.我還希望導航欄能夠實現，點選某個導航標題時，在頁面跳轉的同時，對應的標題能改變顏色以此突出於其他標題。例如：

本以為這樣的效果很好實現，但是因為點選以後頁面就跳轉到了一個全新的頁面，在全新的頁面中，導航欄還是沒有改變，試了很多方式，最後用sessionStorage的方式記錄點選點，實現了這個效果。
具體的程式碼實現是：
　　1. 給每個a標籤都新增不同的id，當點選a標籤時，將點選的id通過sessionStorage儲存到本地。
　　2. 在頁面載入的同時，從本地查詢是否存在id，存在的話， 將這個id對應的a標籤改變字型顏色。

  // 從本地儲存中獲取儲存的id
  var aClick = sessionStorage.getItem('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中就可以了。