个人中心
gpt4 book ai didi

twitter-bootstrap - Twitter Bootstrap Scrollspy 根本不工作

转载 作者：行者123 更新时间：2023-12-04 03:29:03 25 4
gpt4 key购买 nike

我之前问过一个关于 Bootstrap ScrollSpy 的问题，这是我试图让它工作的最后一次尝试。

我想要实现的是在该部分滚动时更改导航栏标签的颜色。我尝试了很多方法，甚至有一个Jsfiddle工作，但即使我的应用程序中的设置也不起作用

这就是我所拥有的

JS

$('#spyOnThis').scrollspy();

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

看法 
<div class="container">
 <div class="row show-grid clear-both">
  <div id="left-sidebar" class="span3 sidebar">
  <div class="side-nav sidebar-block">
    <h3 class="resultTitle fontSize13">Release Dates</h2>
    <ul class="date">
      <% @response.each_pair do |date, movie| %>
      <li><i class="icon-chevron-right"></i><%= link_to date_format(date), "#d_#{date}", :id=> '#d_#{date}' %></li>
    <% end %>
    </ul>
  </div>
</div>
<div class="span9">
  <div id="dateNav">
    <ul class="nav">
      <li><% @response.each_pair do |date, movie| %><%= link_to date_format(date), "#d_#{date}" %><% end %></li>
    </ul>
  </div>
  <div id="spyOnThis">
  <% @response.each_pair do |date, movie| %>
    <h3 class="resultTitle fontSize13" id="d_<%= date %>">Available on&nbsp;<%= date_format(date) %></h3>
    <% movie.each do |m| %>
      <div class="thumbnail clearfix">
        <img class="pull-left" src=<% if m.image_link %> <%= m.image_link %> <% else %> "/assets/noimage.jpg" <% end %>>
        <div class="caption pull-right">
          <%= link_to m.name, m.title_id, :class => 'resultTitle fontSize11' %>
          <p class="bio"><%= m.bio %></p>
          <p class="resultTitle">Cast</p>
          <p class="bio"><%= m.cast.join(", ") unless m.cast.empty? %></p>
          <%= link_to "Remind me", reminders_path(:title_id => m.title_id), :method => :post, :class => 'links button' %>
        </div>
      </div>

    <% end %>
  <% end %>
  </div>
</div><!--span9-->
</div><!--Row-->
</div><!--/container-->

CSS 
#dateNav{
position: fixed;
top: 0; left: 20px;
width: 100%;
background:none;
text-align:center;
}

#spyOnThis {
 height:100%;
 overflow:auto;
}

 .nav > li > a {
  display:block;
  }

.nav > li.active > a {
 display:block;
 color: red;
 text-decoration: underline;
 }

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

我现在要拔头发了，我读到这个scrollspy有很多错误，但肯定它必须像他们网站上的演示一样工作

编辑 
$('#dateNav').scrollspy();

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

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

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

我的 body 也是 100% 的粘性页脚，不确定这是否有区别
帮助真的很感激

最佳答案

您需要从正文中移动 data-spy 和 data-target 属性:

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

并将它们移动到 div“spyOnThis”: 
<div id="spyOnThis">

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

根据 documentation :

“要轻松地将 scrollspy 行为添加到您的顶栏导航，只需将 data-spy="scroll"添加到您要监视的元素(通常是正文)和 data-target=".navbar"以选择哪个导航使用。你会想要使用带有 .nav 组件的 scrollspy。

根据您的 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>

应该: 
<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>

应该是(只显示其中几个): 
<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>

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

关于twitter-bootstrap - Twitter Bootstrap Scrollspy 根本不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14511045/

25 4 0
文章推荐： Objective-C + 发布对象
文章推荐： vue.js - Vue 3 和组合 API : template refs in v-for loop error : only get proxies
文章推荐： cuda - 如何替换已弃用的 tex2D(texture, float, float) [with T=float]？
文章推荐： unit-testing - NSubstitute，在接收到的调用中使用对象作为参数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com