1

直播页面：http ://wlvrtn.com/sites/nms/page.php

我添加了一些 jQuery（感谢 StackOverflow 的帮助）来自动化章节链接的目标，这样第三章链接将指向页面上的第三章（文章）。

正如您从实时页面中看到的那样，我的粘性导航栏妨碍了每一章的开头。我想将每个 jquery 锚点垂直偏移 200px，以便正确显示每章的开头。

HTML - 章节导航：

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

HTML - 文章：

<article class="clearfix">  
    <h1>Chapter One</h1>
    ...
</article>

jQuery：

// Chapters - find the nav & headers
var nav = $('#chapters li a'),
    articles = $('#main article > h1');

// Chapters - now assign an id/href to each
nav.each(function (i) {
    nav.eq(i).attr('href', '#article-' + i);
    articles[i].id = 'article-' + i;
});
4

3 回答 3

1

您可以通过重新排列元素来做到这一点：

<h1>Chapter One<a id="article-0" style="position: relative; top: -200px;">&nbsp;</a></h1>

在这里，您要链接的锚点不是h1内部的“存根”元素，而是h1偏移了几个像素。

显然 CSS 类会好一些：

.v-offset { 
    position: relative;
    top: -200px;
}

...

<h1>Chapter One<a id="article-0" class="v-offset">&nbsp;</a></h1>

您可以使用jQuery的append()方法来动态写入锚点

nav.each(function (i, ele) {
    $(ele).attr('href', '#article-' + i); // $(ele) == $nav.eq(i)
    $(articles[i]).append('<a id="article-' + i + '" class="v-offset">&nbsp;</a>');
});
于 2013-04-10T19:55:07.523 回答
0

将margin-left:200px或padding-left:200px 添加到要缩进的项目。

于 2013-04-10T19:48:10.267 回答
0

如果您想简单地移动列出的文本，您也可以执行以下操作：

HTML

<ul>
    <li>test</li>
    <li>test2</li>
    <li>test3</li>
</ul>

CSS

  ul{
        margin-left:200px;
    }

或者

HTML

<ul>
    <li>test</li>
    <li>test2</li>
    <li>test3</li>
</ul>

CSS

li{
    text-indent:200px;
    list-style-type: none;
}
于 2013-04-10T19:50:48.557 回答