0

有问题的页面：http ://wlvrtn.com/sites/nms-chapters/page.php

该页面目前由 3 个章节组成，每个章节都包含在各自的文章标签中。以后，我会在浮动章节导航中添加额外的章节文章，以及章节链接。

我想达到的目标：

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

即，如果我添加第四章文章，我不想给它赋予id“article-04”；我希望章节导航中的第四个链接在添加时知道它应该指向新文章。我猜是“第 n 个孩子”参与其中，但我太新了，不知道。

谢谢，xo

章节导航：

<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>
4

3 回答 3

1

像这样的东西怎么样（演示）？

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

});
于 2013-04-09T20:35:39.110 回答
0

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

试试这个教程：

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

:)

于 2013-04-09T20:31:41.177 回答
0

满足您的要求的一种相对简单的方法是这样，尽管它肯定可以优化：

$('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 小提琴演示。

参考：

于 2013-04-09T20:45:19.423 回答