Can'；无法让JavaScript导航栏正常工作_Javascript_Html_Css

Can'；无法让JavaScript导航栏正常工作

javascript html css

Can'；无法让JavaScript导航栏正常工作,javascript,html,css,Javascript,Html,Css,所发生的一切根本不算什么。我向下滚动，条的大小保持不变。我将滚动返回，也不会发生任何事情。按照下面的方式将代码放在三个单独的文件中并不像JFiddle那样工作基本上，我一直在尝试实现这个提琴，但出于某种原因，我可以看到它在网站上工作，但在我的版本上不工作小提琴：可能是我链接JavaScript不正确或其他什么我在用谷歌浏览器 HTML: JavaScript: $(function(){ $('#header_nav').data('size','big'); $('#heade

所发生的一切根本不算什么。我向下滚动，条的大小保持不变。我将滚动返回，也不会发生任何事情。按照下面的方式将代码放在三个单独的文件中并不像JFiddle那样工作

基本上，我一直在尝试实现这个提琴，但出于某种原因，我可以看到它在网站上工作，但在我的版本上不工作

小提琴：

可能是我链接JavaScript不正确或其他什么

我在用谷歌浏览器

HTML:

JavaScript:

    $(function(){
$('#header_nav').data('size','big');
$('#header_div').data('size','big');
});

$(window).scroll(function(){
if($(document).scrollTop() > 0)
{
    if($('#header_nav').data('size') == 'big')
    {
        $('#header_nav').data('size','small');
        $('#header_nav').stop().animate({
            height:'40px'
        },600);
        $('#header_div').data('size','small');
        $('#header_div').stop().animate({
            height:'20px',
            width: '20px',
            'padding-top' : 5
        },600);
    }
}
else
{
    if($('#header_nav').data('size') == 'small')
    {
        $('#header_nav').data('size','big');
        $('#header_nav').stop().animate({
            height:'100px'
        },600);
        $('#header_div').data('size','big');
        $('#header_div').stop().animate({
            height:'30px',
            width: '40px',
            'padding-top' : 10
        },600);
    }  
}
});

在发布的HTML中不包括jQuery库

点击F12，我确信控制台中会显示

$未定义
 将您的html转换为：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nav</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
<script type="text/javascript" src="nav.js"></script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'><script>
</head>
<body>
<div id="header_nav">
    <div id="header_div">
        div
    </div>
</div>


导航
div

您可能需要检查我添加的行：
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'><script>



正如我记忆的那样，我不确定它是否正确
我看不出你在哪里包括了jquery？？如果没有它，它将无法正常工作，它确实会说“未捕获的引用错误：$未定义”，这意味着什么？意味着您没有添加定义$的库！成功了！这到底是怎么回事？谢谢您缺少一个允许您使用jquery的文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nav</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
<script type="text/javascript" src="nav.js"></script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'><script>
</head>
<body>
<div id="header_nav">
    <div id="header_div">
        div
    </div>
</div>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'><script>