Bootstrap scroll spy根本不起作用

时间:2017-04-27 18:22:44

标签: twitter-bootstrap twitter-bootstrap-3 scrollspy

我尝试更改或添加或删除的任何内容根本不起作用。好像导航栏本身有问题。我完全喜欢在bootstrap和一堆来自互联网的文章中,但仍然没有什么,这就是我的代码:

$('body').scrollspy({ target: '#navbar-exe' });


$(function() {
    $('a.page-scroll').bind('click', function(event) {
	    var $anchor = $(this);
		$('html, body').stop().animate({
		    scrollTop: $($anchor.attr('href')).offset().top
			}, 1500, 'easeInOutExpo');
		event.preventDefault();
	});
});
		
<head>
   <title>Comming Soon...</title>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   
   <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
   <script type="text/javascript" src="js/jquery-ui.js"></script>
		
   <link href="js/jquery-ui.css" rel="stylesheet">
   <link href="js/bootstrap.css" rel="stylesheet">
   <script src="js/bootstrap.js"></script>
		
   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
	
   <link rel="stylesheet" href="style.css">
</head>
<body data-spy="scroll" data-target="#navbar-exe">
    <!--Navigation bar-->
    <nav class="navbar navbar-defaul navbar-fixed-top" id="navbar-exe">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-2">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand logo page-scroll" href="#Home">WebArtist</a>
            </div>
            <div class="collapse navbar-collapse " id="navbar-collapse-2">
                <ul class="nav navbar-nav navbar-right" >
                    <li>
                        <a href="#Home" class="page-scroll">Home</a>
                    </li>
                    <li>
                        <a href="#About" class="page-scroll">About</a>
                    </li>
                    <li>
                        <a href="#Contact" class="page-scroll">Contact</a>
                    </li>  
                </ul> 
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container -->
    </nav><!-- /.navbar -->
    <!--Navigation bar ends here-->

什么是错的?

1 个答案:

答案 0 :(得分:0)

如果您收到"ReferenceError: $ is not defined",则大部分时间都是参考问题 您的jquery库未正确引用或加载
检查您的引用是否正确,请检查您的路径和文件名。