css3文章右边的TOC菜单是怎么实现的
黄舟
黄舟 2017-04-17 11:25:17
0
2
631

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

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

membalas semua(2)
洪涛

根据正文的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 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();
}
});
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan