css3文章右邊的TOC菜單是怎么實現的

問題描述

RT,就比如這篇文章CSS3打造3D立方體 在Github找到一個toc但是不支持中文，例如我二級標題是中文的話，生成的toc菜單定位到文中就錯誤。 謝謝各位~

問題解答

根據正文的h1、h2、h3等不同層級，使用js來實現的。和標題是不是中文應該沒關系。你找到的那個toc就支持中文。我試過了。

它是以id來定位的。

如果只看文檔的話，應該是

$(’#toc’).toc({ ’selectors’: ’h1,h2,h3’, //elements to use as headings ’container’: ’body’, //element to find all selectors in ’smoothScrolling’: true, //enable or disable smooth scrolling on click ’prefix’: ’toc’, //prefix for anchor tags and class names <----------此處生成id ’onHighlight’: function(el) {}, //called when a new section is highlighted ’highlightOnScroll’: true, //add class to heading that is currently in focus ’highlightOffset’: 100, //offset to trigger the next headline ’anchorName’: function(i, heading, prefix) { //custom function for anchor namereturn prefix+i; }, ’headerText’: function(i, heading, $heading) { //custom function building the header-item textreturn $heading.text(); },’itemClass’: function(i, heading, $heading, prefix) { // custom function for item class return $heading[0].tagName.toLowerCase();}});