搜尋

首頁  >  問答  >  主體

css3文章右边的TOC菜单是怎么实现的

RT,就比如这篇文章CSS3打造3D立方体
在Github找到一个toc但是不支持中文,例如我二级标题是中文的话,生成的toc菜单定位到文中就错误。
谢谢各位~

黄舟黄舟2767 天前613

全部回覆(2)我來回復

  • PHP中文网

    PHP中文网2017-04-17 11:27:17

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

    回覆
    0
  • 巴扎黑

    巴扎黑2017-04-17 11:27:17

    它是以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 name
            return prefix+i;
        },
        'headerText': function(i, heading, $heading) { //custom function building the header-item text
            return $heading.text();
        },
    'itemClass': function(i, heading, $heading, prefix) { // custom function for item class
      return $heading[0].tagName.toLowerCase();
    }
    });
    

    回覆
    0
  • 取消回覆