search

Home  >  Q&A  >  body text

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

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

黄舟黄舟2782 days ago629

reply all(2)I'll reply

  • PHP中文网

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

    According to the h1, h2, h3 and other different levels of the text, it is implemented using js. It should not matter whether the title is in Chinese or not.
    The toc you found supports Chinese. I tried it.

    reply
    0
  • 巴扎黑

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

    It is located by id.

    If you just look at the documentation, it should be

    $('#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();
    }
    });
    

    reply
    0
  • Cancelreply