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;
            auto;
            height:auto;
            z-index:999;
            cursor:pointer;
        }
 #sideBar_title{
            float:left;
            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-300px;
            min-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