Question

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

<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，但是为此定义的内容在哪里？在示例站点中，每当我单击导航栏按钮时.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>

感谢您的帮助！

〜Carpetfizz

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独有的东西。

使用Bootstrap在页面内链接

1 个答案: