Bootstrap ScrollSpy 不工作 [英] Bootstrap ScrollSpy isn't working

查看:26
本文介绍了Bootstrap ScrollSpy 不工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有以下 jsfiddle 项目用于测试 BootSTrap 的 ScrollSpy 功能

I have the following jsfiddle project I am using to test the ScrollSpy feature of BootSTrap

该演示有 5 个指向页面部分的链接,并且这些链接有效.但是,向下滚动页面不会激活导航菜单.此外,我注意到在运行 jsfiddle 时,我的导航中的最后一个菜单选项是灰色的.因为我的导航中的第一个选项在页面下方,所以我认为不会突出显示中殿.

The demo has 5 links to sections of the page and the links work. However, scrolling down the page does not activate the nav menus. Futhermore, I notice that upon running the jsfiddle the very last menu option in my nav is gray. Because the first option in my nav is down the page a bit I would think no nave would be highlighed.

我没有看到我做错了什么??

I am not seeing what I doing wrong??

<section class="navspy">
        <ul id="navigation" class="nav nav-tabs nav-stacked affix" style="width:200px">
            <li><a href="#patientInfo">Patient Info</a>
            </li>
            <li><a href="#EmergencyContactInfo">Emergency Contact</a>
            </li>
            <li><a href="#EmploymentInfo">Employement Info</a>
            </li>
            <li><a href="#GuardianInfo">Guardian Info</a>
            </li>
            <li><a href="#InsuranceInfo">Insurance Info</a>
            </li>
        </ul>
    </section>

感谢您的帮助.

更新:3/5/2013-JSFiddle 链接现在正确

Updated: 3/5/2013-JSFiddle link now correct

推荐答案

body标签的使用方法如下:

Use the body tag in the following way :

带有演示

<body data-spy="scroll" data-target=".navspy">

您使用的是没有 # tag 的 id 导航.也为了让 scrollspy 工作,在数据目标的正文中使用部分 id.

you were using id navigation without # tag . Also for scrollspy to work use the section id to in the body for data-target.

由于您已经在 body 标签中指定了 data-spy 和 data-target,因此无需通过 javascript 进行初始化.

Since you already have the data-spy and data-target specified in body tag no need to initialize via javascript .

这篇关于Bootstrap ScrollSpy 不工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆