如何以编程方式为页面标题创建锚点？

Question

我在一个页面上有几个标题，我需要在每个页面上填充一个链接到适当锚点的导航框。”

但是我的标题都没有锚定。我有太多页面无法手动执行此操作。任何人都可以想出一个干净的jquery解决方案？

Answer 1

function addAnchors(){
    //loop through all your headers
    $.each($('h1'),function(index,value){
        //append the text of your header to a list item in a div, linking to an anchor we will create on the next line
        $('#box-anchors').append('<li><a href="#anchor-'+index+'">'+$(this).html()+'</a></li>');
        //add an a tag to the header with a sequential name
        $(this).html('<a name="anchor-'+index+'">'+$(this).html()+'</a>');
    });
}

Answer 2

实际上，您可以使用 id 链接到每个标签。因此，读出 h1 的 id 并/或设置它们就可以做到这一点，并且会产生更干净的 html（将来在设计 a 标签时不会出现突然的 css 惊喜）。