JS自動生成博文目錄---針對博客園BOOK皮膚

說明

      最近看到許多博主的頁面特別漂亮，都有目錄導航，方便大家閱讀瀏覽。於是一搜索，發現已經有很多相應的教程《JS自動生成博文目錄》。

      但是沒有一個針對BOOk皮膚的，比較喜歡這個皮膚，那就自己動手實現一個咯。

      具體代碼就不做過多介紹了，其他博主已經介紹的很仔細咯。      

HTML代碼 

<div id="sideBar">
   <div id="sideBar_title">文章目錄</div>
   <div id="siderBar_contents" style="display:none">     
   </div>
</div>

CSS代碼 

 #sideBar{
            position:fixed;
            left:0;
            top:50;
            width:auto;
            height:auto;
            z-index:999;
            cursor:pointer;
        }
 #sideBar_title{
            float:left;
            width:40px;
            border-radius:0 15% 10% 0;
            text-align:center;
            font-weight:bold;
            color:white;
            font-size:23px;
            background-color:#93c8a2;
        }
 #siderBar_contents{
            float:left;
            margin-left:10px;
            max-width:300px;
            min-width:200px;
            background-color:#93c8a2;
            min-height:200px;
            opacity:0.9;
            font-size:16px;
            color:white;
            border-radius:5%;
            text-indent: 1em;
            line-height: 1.5em;
        }
#siderBar_contents a{
            color:white;
            text-decoration:none;
        }
#siderBar_contents a:hover{
            text-decoration:underline;
        }
#cnblogs_post_body h2,h3{
   background-color: #93c8a2;
   color:white;
   border-radius:2%;
   text-indent: 0.8em;
}

JS代碼

 var sideBar = document.getElementById('sideBar');
 var sideBar_title = document.getElementById('sideBar_title');
 var siderBar_contents = document.getElementById('siderBar_contents');
 sideBar.onmouseover = function(){
      siderBar_contents.style.display = 'block';
 }
 sideBar.onmouseout = function(){
      siderBar_contents.style.display = 'none';
  }
var h_list = document.querySelectorAll('#cnblogs_post_body h2,h3,h4,h5');          
var str='<dl>';       
if(h_list.length==3){
   sideBar_title.style.display = 'none';
}
for(var i=0; i< h_list.length;i++){
     if('導航統計公告'.indexOf(h_list[i].innerHTML)>-1){
          continue;
     }
     if(h_list[i].nodeName.toLocaleLowerCase()=='h2'){
         str +='<dt><a href="#'+i+'">'+h_list[i].innerHTML+'</a></dt>'
      }else{
         str +='<dd><a href="#'+i+'">'+h_list[i].innerHTML+'</a></dd>'
      }
       //對原先的h標簽，增加id值
       h_list[i].id = i;
}
str+='</dl>';
siderBar_contents.innerHTML=str;

參考文章：

http://www.cnblogs.com/xdp-gacl/p/3718879.html