Scrollspy无法用于导航栏并将最后一个导航栏项显示为突出显示（活动）

时间：2015-01-10 08:31:21

标签： html5 css3 twitter-bootstrap-3 scrollspy

我在实现scrollspy方面遇到了麻烦。我按照bootstrap文档完成了，这是我的代码。

    <body data-spy="scroll" data-target=".navbar-example">
    <div class="wrapper spHeight">
        <header>
            <nav class="navbar navbar-fixed-top navbar-background">
                <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                            <span class="sr-only">Toggle navigation</span>
                            <i class="fa fa-list fa-lg menulist"></i>
                        </button>
                    </div>

                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse navbar-example" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav" id="menu">
                            <li class="centered active"><a class="menuname" href="#home">HOME</a>
                            </li>
                            <li class="centered"><a class="menuname" href="#aboutme">ABOUT</a>
                            </li>
                            <li class="centered"><a class="menuname" href="#technical">SKILLS</a>
                            </li>
                            <li class="centered"><a class="menuname" href="#experience">EXPERIENCE</a>
                            </li>
                            <li class="centered"><a class="menuname" href="#education">EDUCATION</a>
                            </li>
                            <li class="centered"><a class="menuname" href="#contact">CONTACT</a>
                            </li>
                            <li class="centered"><a class="menuname" href="#blogs">BLOGS</a>
                            </li>
                        </ul>
                    </div>
                    <!-- /.navbar-collapse -->
                </div>
                <!-- /.container-fluid -->
            </nav>
        </header>
        <section id="home">
            <div class="banner" id="banner" style="width: 100%; height: 684px;">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 nopadding" style="height:100%">
                    <!--background slide show start-->
                    <img src="images/wallpaper.jpg" alt="batman" width="100%" height="100%">
                    <!--background slide show end-->
                </div>
            </div>
        </section>
        <section class="aboutme" id="aboutme">
            <div class="container">
                <div class="heading">                    
                </div>
                <div class=" col-xs-12 col-sm-12 col-md-7 col-lg-7">
                    <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 class=" col-xs-12 col-sm-12 col-md-4 col-lg-4 col-md-offset-1 col-lg-offset-1 centered">
                    <img src="images/kunal.jpg" alt="Kunal Chokshi" class="img-circle topmar">
                </div>
            </div>
        </section>
        <section class="technical" id="technical">
            <div class="container">
                <div class="heading">                    
                </div>
                <div class=" col-xs-12 col-sm-12 col-md-7 col-lg-7">
                    <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>
        <section class="experience" id="experience">
            <div class="container">
                <div class="heading">                    
                </div>
                <div class=" col-xs-12 col-sm-12 col-md-7 col-lg-7">
                    <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 class="education" id="education">
            <div class="container">
                <div class="heading">                    
                </div>
                <div class=" col-xs-12 col-sm-12 col-md-7 col-lg-7">
                    <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 class="contact" id="contact">
            <div class="container">
                <div class="heading">                    
                </div>
                <div class=" col-xs-12 col-sm-12 col-md-7 col-lg-7">
                    <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>
        </div>
        </div>
        </div>
    </div>
</body>
<script>
$('body').scrollspy({ target: '.navbar-example' })
</script>

这是我的输出：

enter image description here

并且我仍然不明白为什么联系人突出显示，因为我已经将活动课程提供给家庭。

0 个答案:

没有答案
相关问题
最新问题