html - 使用 Bootstrap 在页面内链接

Question

我很困惑如何链接到页面中的元素。我正在学习 starter template对于 Twitter Bootstrap，它在导航栏中包含以下代码:

<ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
</ul>

我知道在列表元素中是 #about 和 #contact 的 anchor 标记，但是为此定义的内容在哪里？在示例站点中，每当我单击导航栏按钮时，.starter-template div 都保持不变。每当单击导航栏按钮时，我需要做什么才能更改 div？我尝试这样做，但它只是建立了一个巨大的链接，正如您所期望的那样:

<a name="about">
    <div class="container">
        <div class="starter-template">
            <h1>About.</h1>
                <p class="lead">#about</p>
        </div>
    </div>
</a>

感谢您的帮助!

~地毯嘶嘶声

Answer 1

链接是占位符。如果你想让它们保持一致，比如#about ，您希望使用该 ID 在您的页面中定义一个元素。例如，制作一个更长的页面，并包含以下标记:

<h1 id="about">Here's the About Content</h1>

单击链接将跳转到页面中的那个位置。

维基百科使用这种方法跳转到文章中的章节。例如，检查 <span>此处包含“另请参阅”文本的标签:

http://en.wikipedia.org/wiki/Twitter_Bootstrap#See_also

但是，由于它们是 Bootstrap 模板中的占位符，因此您可以根据需要放入自己的链接。例如，如果您想添加指向 Yahoo 的链接，您需要输入自己的 HREF，如下所示:

<a href="http://www.yahoo.com">Yahoo</a>

或定位您网站中的任何其他链接。

它们只是占位符。如果您希望这些目标存在，您必须在它们指向的 URL 上创建页面。

如果您正在开发单页应用程序 (SPA)，此类散列链接的行为可能会有所不同，但我想我已经涵盖了让您感到困惑的更简单的答案。即，散列链接试图跳转到页面内的一个 ID，但是具有该 ID 的元素需要存在才能发生任何明显的事情。

这种行为内置于 HTML 中；这不是使用 Bootstrap 所独有的东西。