如何激活 Twitter Bootstrap Affix 组件的链接? [英] How to activate links for Twitter Bootstrap Affix component?

问题描述

我正在使用 Twitter Bootstrap Affix JS 组件.当我向下滚动页面时，我的 UL 列表已正确粘贴.另外 - 当我单击单个列表项时(就像 Twitter 在其文档页面上所做的那样)，它会向下滚动到我文档中的锚点 ID，但 LI 元素不会收到 Twitter 的活动"类.当我滚动文档时，它也不会获得活动"类.

I am using the Twitter Bootstrap Affix JS component. My UL list is affixing properly when I scroll the page down. Also - when I click on the individual list items (much like Twitter does on its docs page), it scrolls down to my anchor ID in my document, but the LI element does not receive the Twitter 'active' class. Nor does it get the 'active' class when I scroll my document.

当我滚动到文档中的特定部分时，我希望适当的链接处于活动状态(很像 scroll-spy 的工作)，但我似乎无法让它工作.

I would expect the appropriate link to be active when I have scrolled to the particular part in the document (much like scroll-spy works), but I can't seem to get this to work.

我需要设置什么特别的东西，以便 Bootstrap 在适当的时候添加活动"类吗?

Is there something special I need to set up so that Bootstrap will add the 'active' class when appropriate?

推荐答案

是的，您还需要使用 ScrollSpy 插件.您可以通过标记或通过 JS 激活它.让 #scroll-pane 为触发 scroll 事件的元素， #navbar 为包含 ul.nav，以下应该让它工作:

Yes, you need to also use the ScrollSpy plugin. You can activate it through markup or through JS. Letting #scroll-pane be the element that triggers scroll events and #navbar be the element containing the ul.nav, the following should get it working:

<div id="scroll-pane" data-spy="scroll" data-target="#navbar">

JS

$('#scroll-pane').scrollspy({target: '#navbar'});

使用 HTML 或 JS，但不能同时使用.

Use either the HTML or the JS, but not both.

当 ScrollSpy 插件传递一个目标时，例如 scrollspy({target: '#navbar'})，这是用来构造表单的选择器

When the ScrollSpy plugin is passed a target, like scrollspy({target: '#navbar'}), this is used to construct a selector of the form

target + ' .nav li > a'

在这个例子中会给出

'#navbar .nav li > a'

了解此选择器创建的规定很重要.

It is important to understand the stipulations that this selector creates.

1. 原来的target必须是一个包含类nav的元素的元素.所以 .nav 可能永远不会成为你的目标.
2. .nav 元素必须包含列表项.
3. 这些列表项必须有一个 <a> 作为直接子项.

1. The original target must be an element which contains an element with class nav. So .nav should probably never be your target.
2. The .nav element must contain list items.
3. Those list items must have a <a> as a direct child.

由此选择的 <a> 元素会被 data-target 或 href 以 '# 开头的元素过滤掉'.这些 href 依次用于选择 ScrollSpy 插件附加到的元素中包含的元素.选择的偏移量被存储，当滚动发生时，将当前滚动偏移量与存储的值进行比较，用类 active<更新相应的 <a> 元素/代码>.

The <a> elements selected by this are then filtered out by those whose data-target or href begin with a '#'. These href's are in turn used to select the elements contained in the element to which the ScrollSpy plugin is attached. Offsets of those selected are stored, and when a scroll occurs, a comparison of the current scroll offset is made with the stored values, updating the corresponding <a> element with the class active.

希望此摘要可以帮助您更好地了解尝试实现插件时可能会遇到的问题，而无需深入研究代码.

Hopefully, this summary can aid in better understanding what one might be tripping over when attempting to implement the plugin, without having to dig into the code in further detail.

这篇关于如何激活 Twitter Bootstrap Affix 组件的链接?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！