css3文章右邊的TOC菜單是怎么實(shí)現(xiàn)的
問題描述
RT,就比如這篇文章CSS3打造3D立方體 在Github找到一個(gè)toc但是不支持中文,例如我二級標(biāo)題是中文的話,生成的toc菜單定位到文中就錯(cuò)誤。 謝謝各位~
問題解答
回答1:根據(jù)正文的h1、h2、h3等不同層級,使用js來實(shí)現(xiàn)的。和標(biāo)題是不是中文應(yīng)該沒關(guān)系。你找到的那個(gè)toc就支持中文。我試過了。
回答2:它是以id來定位的。
如果只看文檔的話,應(yīng)該是
$(’#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();}});
相關(guān)文章:
1. html5 - 如何實(shí)現(xiàn)帶陰影的不規(guī)則容器?2. javascript - 循環(huán)嵌套多個(gè)promise應(yīng)該如何實(shí)現(xiàn)?3. mysql優(yōu)化 - 關(guān)于mysql分區(qū)4. css - 移動端字體設(shè)置問題5. objective-c - iOS開發(fā)支付寶和微信支付完成為什么跳轉(zhuǎn)到了之前開發(fā)的一個(gè)app?6. css3 - rem布局下,用戶瀏覽器的最小字號是12px怎么辦?7. vue.js - vue 打包后 nginx 服務(wù)端API請求跨域問題無法解決。8. 請教各位大佬,瀏覽器點(diǎn) 提交實(shí)例為什么沒有反應(yīng)9. 前端 - IE9 css兼容問題10. javascript - ionic2 input autofocus 電腦成功,iOS手機(jī)鍵盤不彈出
