gpt4 book ai didi

twitter-bootstrap - Bootstrap Scrollspy 不工作

转载 作者:行者123 更新时间:2023-12-03 23:40:36 28 4
gpt4 key购买 nike

我正在尝试实现一个固定的侧边菜单,它用事件类更新事件页面链接。我将 scroll spy HTML5 元素放在主体上,但我遇到了问题。有人可以检查我的页面,看看他们是否可以确定问题所在吗?

http://mattaltepeter.com/new/about.shtml

最佳答案

问题是您将导航放置在一个 div 中,而不是将导航 ID 用于滚动。为了使 scrollspy 工作,您可以将“side-nav”分配给 span3 div,例如:Jsfiddle demo in browser

<div class="row">
<div class="span3" id="side-nav">
<ul class="nav nav-list about-list hidden-phone hidden-tablet affix" >
<li class="active"><a href="#about"><i class="icon-chevron-right"></i> About Me</a></li>
<li><a href="#education"><i class="icon-chevron-right"></i> Education</a></li>
<li><a href="#work"><i class="icon-chevron-right"></i> Work Experience</a></li>
<li ><a href="#sports"><i class="icon-chevron-right"></i> Sports</a></li>
</ul>
</div>

您可以通过以下方式创建段落部分:

<div class="page-header" id="about">
<h1 >About Me</h1>

<p>My name is Matt Altepeter. I am 21 years old .</p>
</div>

请删除初始化滚动的脚本,因为您已经将它们添加到正文中

<body data-offset="50" data-target="#side-nav" data-spy="scroll">

最好在 jquery 之后和任何其他脚本之前声明 bootstrap.js。将所有脚本放在页脚中,有助于节省加载时间。

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

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

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com