<script> var left = document.getElementById('main-left'); var right = document.getElementById('main-right'); var array = document.getElementsByClassName('zone-box'); function buildDiv(scroll, tb, size) { var old = scroll.getElementsByTagName("div"); if (old.length > 0) { for (var o = 0; o < old.length; o++) { old[o].remove(); } } var tb2 = tb.cloneNode(true); var len = tb2.rows.length; for (var i = len; i > size; i--) { tb2.deleteRow(size); } var bak = document.createElement("div"); bak.style.width = scroll.clientWidth + 'px'; scroll.appendChild(bak); bak.appendChild(tb2); bak.style.position = "absolute"; bak.style.backgroundColor = "#cfc"; //表头背景颜色,请保持和css中定义颜色一样 bak.style.display = "block"; bak.style.left = 0; bak.style.top = "0px"; scroll.onscroll = function () { bak.style.top = this.scrollTop + "px"; } } window.onload = function () { for (var s = 0; s < array.length; s++) { if (array[s].getElementsByTagName('table').length > 0) { buildDiv(array[s], array[s].getElementsByTagName('table')[0], 1); } } //添加目录 var h2List = [], h3List = [], h4List = []; var i1 = 0, i2 = 0, i3 = 0, n1 = 0, n2 = 0, n3 = 0; var temp = '<dl>'; var cateList = right.innerHTML.match(/(<h[2-5][^>]*>.*?<\/h[2-5]>)/ig); for (var i = 0; i < cateList.length; i++) { if (/(<h2[^>]*>.*?<\/h2>)/ig.test(cateList[i])) { n1++; n2 = 0; temp += '<dd class="cate-item1"><span>' + n1 + '</span><a href="#' + n1 + '">' + cateList[i].replace(/<[^>].*?>/g, "") + '</a></dd><div style="clear:both"></div>'; h2List[i1] = n1; i1++; } else { if (/(<h3[^>]*>.*?<\/h3>)/ig.test(cateList[i])) { n2++; temp += '<dd class="cate-item2"><span>' + n1 + '.' + n2 + '</span><a href="#' + n1 + '_' + n2 + '">' + cateList[i].replace(/<[^>].*?>/g, "") + '</a></dd><div style="clear:both"></div>'; h3List[i2] = n1 + '_' + n2; i2++; n3 = 0; } else { n3++; temp += '<dd class="cate-item3"><span>' + n1 + '.' + n2 + '.' + n3 + '</span><a href="#' + n1 + '_' + n2 + '_' + n3 + '">' + cateList[i].replace(/<[^>].*?>/g, "") + '</a></dd><div style="clear:both"></div>'; h4List[i3] = n1 + '_' + n2 + '_' + n3; i3++; } } } temp += '</dl>'; left.innerHTML = temp; //默认第一个处于aitive状态 left.getElementsByTagName('dd')[0].className = left.getElementsByTagName('dd')[0].className + " active"; }; left.style.height = (document.documentElement.clientHeight - 200) + "px"; window.onresize = function () { var array = document.getElementsByClassName('zone-box'); for (var s = 0; s < array.length; s++) { if (array[s].getElementsByTagName('table').length > 0) { buildDiv(array[s], array[s].getElementsByTagName('table')[0], 1); } } left.style.height = (document.documentElement.clientHeight - 200) + "px"; }; //点击右侧书签添加active if (left.addEventListener) { left.addEventListener("click", function (e) { for (var c = 0; c < left.getElementsByTagName('dd').length; c++) { left.getElementsByTagName('dd')[c].className = left.getElementsByTagName('dd')[c].className.replace("active", ""); } e.target.parentNode.className = e.target.parentNode.className + " active"; }); } else { left.attachEvent("onclick", function (e) { for (var c = 0; c < right.getElementsByTagName('dd').length; c++) { left.getElementsByTagName('dd')[c].className = left.getElementsByTagName('dd')[c].className.replace("active", ""); } e.srcElement.parentNode.className = e.srcElement.parentNode.className + " active"; }) } window.onscroll = function () { var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if (scrollTop >= 100) { left.style.position = "fixed"; left.style.top = 10 + 'px'; } else { left.style.position = "static"; } } </script>