我正在尝试设置scrollspy,但是我无法使效果起作用.我做过研究并经历过
Bootstrap 3 scrollspy strange behaviour – not updating active class on scroll,
Bootstrap ScrollSpy isn’t working,Bootstrap 3 Scrollspy Activate Event Not Firing,
和 Bootstrap scrollspy link active not applied,我仍然有问题.
这是我目前的代码.
来自application.HTML.erb
<body data-spy="scroll" data-target="#navtainer" data-offset="0">
这是视图中的代码
<div ID="navtainer"> <div > <div > <div > <a href="#">Demo</a></div> <ul > <li ><a href="#intro">Home</a></li> <li ><a href="#home">home</a></li> <li><a href="#newest">new</a></li> <li><a href="#about">about</a></li> </ul> </div> </div> </div>
编辑：Section元素的片段
<!-- Section #1 --><section ID="intro" data-speed="6" data-type="background"> <div > <div > <% image_tag"landingPage/desktop.png" %> </div> <div > <img src="landingPage/Title.png"> </div> </div> <div > <div > <h1>Shark Jousting </h2> <h2>This page demonstrates parallax within Twitter bootstrap.</h2> <p> Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tempor incIDIDunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupIDatat non proIDent,sunt in culpa qui officia deserunt mollit anim ID est laborum. </p> </div> </div></section><!-- Section #2 --><section ID="home" data-speed="4" data-type="background"> <div > <h1 ID = "toolTitle"> Pizza Drone </h1> <div > <div > <h2>Convert</h2> <p>Convert to pastafarianism. Taste the Rainbow </p> <p><a href="#">VIEw details </a></p> </div><!-- /.span4 --> <div > <h2>Dance!</h2> <p>disco all night!!! BoogIE! </p> <p><a href="#">VIEw details </a></p> </div><!-- /.span4 --> <div > <h2>PIE</h2> <p>YUM YUM YUM </p> <p><a href="#">VIEw details </a></p> </div><!-- /.span4 --> </div> </div></section><section ID="newest" data-speed="0" data-type="background"> <div > <div > <h2> Powered by Twerking</h2> <p> In an effort to be green,our company uses special pants that convert twerking into electricity </p> </div> </div></section><!-- Section #3 --><section ID="about" data-speed="2" data-type="background"> <div > <div > <h1>Final Section headline <small>Some subtext goes here...</small></h1> </div> <div > <div > <h2>More Details</h2> <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam ID dolor ID nibh ultricIEs vehicula ut ID elit. Morbi leo risus,porta ac consectetur ac,vestibulum at eros. Praesent commodo cursus magna,vel scelerisque cursus nisl consectetur et.</p> <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam ID dolor ID nibh ultricIEs vehicula ut ID elit. Morbi leo risus,vel scelerisque cursus nisl consectetur et.</p> <p><a >VIEw details </a></p> </div><!-- /.span4 --> <div > <h2>heading</h2> <div > <a href="#"> <img src="landingPage/check.png"> </a> <div > <h4 >Media heading</h4> Cras sit amet nibh libero,in gravida nulla. Nulla vel metus scelerisque ante. </div> </div> <div > <a href="#"> <img src="landingPage/check.png"> </a> <div > <h4 >Media heading</h4> Cras sit amet nibh libero,in gravida nulla. Nulla vel metus scelerisque ante. </div> </div> </div><!-- /.span4 --> <div > <h2>Log In</h2> <form > <div > <label for="inputEmail">Email</label> <div > <input type="text" ID="inputEmail" placeholder="Email" > </div> </div> <div > <label for="inputPassword">Password</label> <div > <input type="password" ID="inputPassword" placeholder="Password" > </div> </div> <div > <div > <div ><label > <input type="checkBox"> Remember me <br><br> </label></div> <button type="submit" >Sign in</button> </div> </div> </form> </div><!-- /.span4 --> </div> </div></section>
这是我的Application.Js文件.
//= require bootstrap//= require jquery//= require jquery_uJs//= require turbolinks//= require_tree .解决方法 app / assets / JavaScripts / application.Js文件按您指定的顺序加载JavaScript.由于bootstrap使用jquery,你需要确保jquery和jquery_uJs是第一个被加载的东西.
//= require jquery//= require jquery_uJs//= require bootstrap//= require turbolinks//= require_tree .总结
以上是内存溢出为你收集整理的ruby-on-rails – ScrollSpy未在bootstrap 3中激活全部内容，希望文章能够帮你解决ruby-on-rails – ScrollSpy未在bootstrap 3中激活所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）