我想实现" ScrollSpy" (我在每篇博文中使用Materialise)。我认为最好的实现是使用jQuery。但是,我正在努力让它充满活力。所以,我有这个代码。
$('body.single .entry-content').append('<div class="col hide-on-small-only m3 l2"><ul class="section table-of-contents"></ul></div>');
var h2 = $('.entry-content').find('h2').text();
var h3 = $('.entry-content').find('h3').text();
$('ul.table-of-contents').append("<li><a href='#" +h2 +"'>" +h2 +"</a></li>");
$('ul.table-of-contents').append("<li><a href='#" +h3 +"'>" +h3 +"</a></li>");
如何根据h2,h3,h4等数量使其动态化?
答案 0 :(得分:0)
您可以遍历标题元素,然后添加li
元素,如:
var html = '';
$('.entry-content').find('h2, h3, h4, h5').each(function() {
var header = $(this).text();
html += "<li><a href='#" + header + "'>" + header + "</a></li>";
});
$('ul.table-of-contents').append(html);
答案 1 :(得分:0)
您可以尝试以下块
$('body.single .entry-content').append('<div class="col hide-on-small-only m3 l2"><ul class="section table-of-contents"></ul></div>');
$(".entry-header h2, .entry-header h3").each(function (index) {
var $this = $(this), ID = "header" + index;
$this.attr("id", ID);
$("ul.table-of-contents").append(
$("<li/>").append($("<a/>").attr("href", "#" + ID).text(h2.text());
);
});
答案 2 :(得分:0)
未经测试:
说你想要升到h4
For (var i=0;i<=4;i++){
var hTag= 'h' + i.toString();
hText= $('.entry-content').find('hTag').text();
$('ul.table-of-contents').append("<li><a href='#" +hText +"'>" +hText +"</a></li>");
}