Twitter bootstrap Twitter引导Scrollspy根本不工作_Twitter Bootstrap_Scroll

Twitter bootstrap Twitter引导Scrollspy根本不工作

twitter-bootstrap scroll

Twitter bootstrap Twitter引导Scrollspy根本不工作,twitter-bootstrap,scroll,Twitter Bootstrap,Scroll,我已经问了一个关于引导ScrollSpy的问题，这是我最后一次尝试让它工作我试图实现的是在滚动该部分时更改导航栏a标记的颜色。我已经尝试了很多方法，甚至有一个工作，但即使是在我的应用程序设置不工作这就是我所拥有的 JS 身体我知道高度100%可能会导致问题，但我的滚动条的高度将取决于内容，它可以改变我现在很紧张，我已经读到这个scrollspy很有问题，但它肯定会像他们网站上的演示一样工作编辑 $（'#dateNav'）.scrollspy（）； HTML ul class=“nav

我已经问了一个关于引导ScrollSpy的问题，这是我最后一次尝试让它工作

我试图实现的是在滚动该部分时更改导航栏a标记的颜色。我已经尝试了很多方法，甚至有一个工作，但即使是在我的应用程序设置不工作

这就是我所拥有的

身体

我知道高度100%可能会导致问题，但我的滚动条的高度将取决于内容，它可以改变

我现在很紧张，我已经读到这个scrollspy很有问题，但它肯定会像他们网站上的演示一样工作

编辑

$（'#dateNav'）.scrollspy（）；

HTML

ul class=“nav”>


于2013年1月9日提供
于2013年1月11日提供
于2013年1月18日提供
于2013年1月23日提供
于2013年1月25日提供

这会将所有链接变为红色，因此它们现在都处于活动状态

另外，我的身体是100%的粘性页脚，不知道这是否有区别

帮助非常感谢

您需要将数据间谍和数据目标属性从身体中移出：

<body data-spy="scroll" data-target="#dateNav">

并将其移动到div“spyOnThis”：

应该是：

<div id="spyOnThis" data-spy="scroll" data-target="#dateNav">

<ul class="nav dateNav">
    <li><a href="#d_2013-01-09">9th Jan 2013</a></li>
    <li><a href="#d_2013-01-11">11th Jan 2013</a></li>
    <li><a href="#d_2013-01-18">18th Jan 2013</a></li>
    <li><a href="#d_2013-01-23">23rd Jan 2013</a></li>
    <li><a href="#d_2013-01-25">25th Jan 2013</a></li>
    <li><a href="#d_2013-01-30">30th Jan 2013</a></li>
</ul>

根据：

“要轻松地将scrollspy行为添加到topbar导航中，只需将data spy=“scroll”添加到要监视的元素（最典型的是主体）和data target=“.navbar”来选择要使用的导航。您需要将scrollspy与.nav组件一起使用。”

根据您的HTML，您还需要修复以下几件事：

您的列表标记未关闭：

<ul class="nav">
    <li>
        <a href="#d_2013-01-09">9th Jan 2013</a>
        <a href="#d_2013-01-11">11th Jan 2013</a>
        <a href="#d_2013-01-18">18th Jan 2013</a>
        <a href="#d_2013-01-23">23rd Jan 2013</a>
        <a href="#d_2013-01-25">25th Jan 2013</a>
        <a href="#d_2013-01-30">30th Jan 2013</a>
    </li>
</ul>

应该是：

<div id="spyOnThis" data-spy="scroll" data-target="#dateNav">

<ul class="nav dateNav">
    <li><a href="#d_2013-01-09">9th Jan 2013</a></li>
    <li><a href="#d_2013-01-11">11th Jan 2013</a></li>
    <li><a href="#d_2013-01-18">18th Jan 2013</a></li>
    <li><a href="#d_2013-01-23">23rd Jan 2013</a></li>
    <li><a href="#d_2013-01-25">25th Jan 2013</a></li>
    <li><a href="#d_2013-01-30">30th Jan 2013</a></li>
</ul>

您的div也未正确关闭：

<div id="spyOnThis">
 <h3 id="d_2013-01-09" class="resultTitle fontSize13">Available on 9th Jan 2013</h3>
 <div class="thumbnail clearfix">
 <h3 id="d_2013-01-11" class="resultTitle fontSize13">Available on 11th Jan 2013</h3>
 <div class="thumbnail clearfix">
 <div class="thumbnail clearfix">
 <div class="thumbnail clearfix">
 <div class="thumbnail clearfix">
 <h3 id="d_2013-01-18" class="resultTitle fontSize13">Available on 18th Jan 2013</h3>
 <div class="thumbnail clearfix">
 <div class="thumbnail clearfix">
     <h3 id="d_2013-01-23" class="resultTitle fontSize13">Available on 23rd Jan 2013</h3>
     <div class="thumbnail clearfix">
     <h3 id="d_2013-01-25" class="resultTitle fontSize13">Available on 25th Jan 2013</h3>
 </div>


于2013年1月9日提供
于2013年1月11日提供
于2013年1月18日提供
于2013年1月23日提供
于2013年1月25日提供

应该是（仅显示其中的几个）：


于2013年1月23日提供
于2013年1月25日提供

此外，100%的高度似乎只会突出显示导航栏列表中最底部的条目。

好的，首先，您的导航链接应该单独包装在

li

标签中，即

    <div id="dateNav">
      <ul class="nav">
        <li><a href="#d_2013-01-09">9th Jan 2013</a></li>
        <li><a href="#d_2013-01-11">11th Jan 2013</a></li>
        <li><a href="#d_2013-01-18">18th Jan 2013</a></li>
        <li><a href="#d_2013-01-23">23rd Jan 2013</a></li>
        <li><a href="#d_2013-01-25">25th Jan 2013</a></li>
        <li><a href="#d_2013-01-30">30th Jan 2013</a></li>
      </ul>
    </div>

其次，您的

div缺少很多结束div标记，因此它们都嵌套在一起，而不是彼此下面。我只是删除了你的

除法，留下以下内容：

    <div id="spyOnThis">
      <h3 id="d_2013-01-09" class="box resultTitle fontSize13">Available on 9th Jan 2013</h3>
      <h3 id="d_2013-01-11" class="box resultTitle fontSize13">Available on 11th Jan 2013</h3>
      <h3 id="d_2013-01-18" class="box resultTitle fontSize13">Available on 18th Jan 2013</h3>
      <h3 id="d_2013-01-23" class="box resultTitle fontSize13">Available on 23rd Jan 2013</h3>
      <h3 id="d_2013-01-25" class="box resultTitle fontSize13">Available on 25th Jan 2013</h3>
    </div>


于2013年1月9日提供
于2013年1月11日提供
于2013年1月18日提供
于2013年1月23日提供
于2013年1月25日提供

您可以重新添加分隔符，但请确保关闭分隔符，否则ScrollSpy将无法正确跟踪分隔符并将其中断。

如果您深入研究此插件的代码，那么选择.nav的父级实际上非常重要

this.selector = (this.options.target
      || ((href = $(element).attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
      || '') + ' .nav li > a'

您的

H3

标签中的

id=“d”

是否应移动到

。我是ScrollSpy新手，但我相信你丢失了“盒子”的id。我不这么认为，因为h3在我的案例中启动了电影的每个部分，所以我希望h3是触发器，只是验证你的body标签中设置了

dateNav

，而不是

navbar

。您的输出的副本也会有帮助。我已经更新了我的问题，输出？您想看什么？谢谢，只是您的

和

的html示例。谢谢您的回答，尽管现在所有日期都是红色的，所以它们仍然处于活动状态？请检查列表标记的格式。将它们作为

放在HTML中的方式就是将它们分组到一个列表项中。相反，将它设置为

，它应该可以解决这个问题，我使用了你的fiddle示例中的CSS，并将你的HTML添加到其中，因此这是一种混搭，但我明白了这一点：如果你设置的

结构与你的HTML当前的结构类似，你将看到所有链接都变红。非常感谢，刚刚修复了Div上的li问题，现在最后一个李突出显示为红色，所以到达那里，非常感谢你们的帮助，好吧，你们两个真的不客气。最后一项始终突出显示的问题与高度有关：在“spyOnThis css”中为100%。下面是一些讨论：还有一个与此相关的问题：

<ul class="nav">
    <li>
        <a href="#d_2013-01-09">9th Jan 2013</a>
        <a href="#d_2013-01-11">11th Jan 2013</a>
        <a href="#d_2013-01-18">18th Jan 2013</a>
        <a href="#d_2013-01-23">23rd Jan 2013</a>
        <a href="#d_2013-01-25">25th Jan 2013</a>
        <a href="#d_2013-01-30">30th Jan 2013</a>
    </li>
</ul>

<ul class="nav dateNav">
    <li><a href="#d_2013-01-09">9th Jan 2013</a></li>
    <li><a href="#d_2013-01-11">11th Jan 2013</a></li>
    <li><a href="#d_2013-01-18">18th Jan 2013</a></li>
    <li><a href="#d_2013-01-23">23rd Jan 2013</a></li>
    <li><a href="#d_2013-01-25">25th Jan 2013</a></li>
    <li><a href="#d_2013-01-30">30th Jan 2013</a></li>
</ul>

<div id="spyOnThis">
 <h3 id="d_2013-01-09" class="resultTitle fontSize13">Available on 9th Jan 2013</h3>
 <div class="thumbnail clearfix">
 <h3 id="d_2013-01-11" class="resultTitle fontSize13">Available on 11th Jan 2013</h3>
 <div class="thumbnail clearfix">
 <div class="thumbnail clearfix">
 <div class="thumbnail clearfix">
 <div class="thumbnail clearfix">
 <h3 id="d_2013-01-18" class="resultTitle fontSize13">Available on 18th Jan 2013</h3>
 <div class="thumbnail clearfix">
 <div class="thumbnail clearfix">
     <h3 id="d_2013-01-23" class="resultTitle fontSize13">Available on 23rd Jan 2013</h3>
     <div class="thumbnail clearfix">
     <h3 id="d_2013-01-25" class="resultTitle fontSize13">Available on 25th Jan 2013</h3>
 </div>

<div class="thumbnail clearfix">
     <h3 id="d_2013-01-23" class="resultTitle fontSize13">Available on 23rd Jan 2013</h3>
</div>
<div class="thumbnail clearfix">
     <h3 id="d_2013-01-25" class="resultTitle fontSize13">Available on 25th Jan 2013</h3>
</div>

    <div id="dateNav">
      <ul class="nav">
        <li><a href="#d_2013-01-09">9th Jan 2013</a></li>
        <li><a href="#d_2013-01-11">11th Jan 2013</a></li>
        <li><a href="#d_2013-01-18">18th Jan 2013</a></li>
        <li><a href="#d_2013-01-23">23rd Jan 2013</a></li>
        <li><a href="#d_2013-01-25">25th Jan 2013</a></li>
        <li><a href="#d_2013-01-30">30th Jan 2013</a></li>
      </ul>
    </div>

    <div id="spyOnThis">
      <h3 id="d_2013-01-09" class="box resultTitle fontSize13">Available on 9th Jan 2013</h3>
      <h3 id="d_2013-01-11" class="box resultTitle fontSize13">Available on 11th Jan 2013</h3>
      <h3 id="d_2013-01-18" class="box resultTitle fontSize13">Available on 18th Jan 2013</h3>
      <h3 id="d_2013-01-23" class="box resultTitle fontSize13">Available on 23rd Jan 2013</h3>
      <h3 id="d_2013-01-25" class="box resultTitle fontSize13">Available on 25th Jan 2013</h3>
    </div>

this.selector = (this.options.target
      || ((href = $(element).attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
      || '') + ' .nav li > a'