使用jQuery自动链接到页面中的章节

Question

页面:http://wlvrtn.com/sites/nms-chapters/page.php

这个页面目前由3个章节组成，每个章节都包含在自己的文章标签中。将来，我将在浮动章节导航中添加其他章节文章以及章节链接。

我想要实现的:

我想通过jQuery自动化章节导航链接目的地，使列表中的第一个链接指向页面上的第一篇文章，第二个链接指向第二篇文章，依此类推。

。如果我添加了第四章的文章，我不想给它命名为article-04;我希望在章节导航的第四个链接，当添加时，知道它应该指向新的文章。我猜"n -child"与此有关，但我太新了，不知道。

谢谢,xo

---

Nav章:

<nav id="chapters">
  <ul>
     <li><a href="#">Chapter One</a></li>
     <li><a href="#">Chapter Two</a></li>
     <li><a href="#">Chapter Three</a></li>
  </ul>
</nav>

---

文章:章

<article class="clearfix">
  <h1>Chapter One</h1>
</article>
<article class="clearfix">
   <h1>Chapter Two</h1>
     <p>And so on...</p>

Answer 1

像这样的(demo)怎么样?

$(function(){
    // find the nav & headers
    var nav = $('#chapters li a'),
        articles = $('#main article > h1');
    // now assign an id/href to each
    nav.each(function(i){
        nav.eq(i).attr('href', '#article-' + i);
        articles[i].id = 'article-' + i;
    });
});

Answer 2

有很多关于jquery锚链接滚动的jquery教程。我个人在我的一个项目中使用了这个

试试这个教程:

http://tympanus.net/codrops/2011/12/05/lateral-on-scroll-sliding-with-jquery/

:)

Answer 3

满足您的需求的一个相对简单的方法是这样的，尽管它当然可以优化:

$('h1').each(
    function(){
        var that = $(this),
            txt = that.text();
        that[0].id = txt.replace(/s+/,'');
        if (!$('#toc').length){
            $('<ul />', { id : 'toc' }).prependTo('body');
        }
        var li = $('<li />').appendTo('#toc');
        $('<a />', {'href' : '#' + that.text().replace(/s+/,''), text : that.text()}).appendTo(li);
    });

JS Fiddle demo.

引用:

• jQuery:
  • appendTo() .
  • prependTo() .
  • text() .
• 纯JavaScript:
  • String.replace() .