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

问题描述

我正在使用Twitter Bootstrap Affix JS组件.向下滚动页面时，我的UL列表正确粘贴.另外-当我单击单个列表项时(就像Twitter在其docs页面上所做的那样)，它会向下滚动到我的文档中的锚点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在适当的时候添加'active'类?

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