Fatal编程技术网

Javascript 不能换班上班

javascript jquery html

Javascript 不能换班上班,javascript,jquery,html,Javascript,Jquery,Html,我已经试着让这个简单的代码工作了几个小时，但需要帮助，因为它似乎不工作 我在js文件中使用toggleClass来切换头上的类。我尝试了所有可能的方法，也在JSFIDLE中尝试过，它有时可以工作，有时甚至不能使用相同的代码。所以肯定是出了问题 以下是我的html代码： <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html;

我已经试着让这个简单的代码工作了几个小时，但需要帮助，因为它似乎不工作

我在js文件中使用toggleClass来切换头上的类。我尝试了所有可能的方法，也在JSFIDLE中尝试过，它有时可以工作，有时甚至不能使用相同的代码。所以肯定是出了问题

以下是我的html代码：

<!DOCTYPE HTML>
<html> 
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Menu</title>
        <link rel="stylesheet" type="text/css" href="menystyle.css">
    </head>
    <body>
        <header class="large">
            <nav>
                <ul>
                    <li><a href="#">Home</a>
                    </li>
                    <li><a href="#">Posts</a>
                    </li>
                    <li><a href="#">Contact</a>
                    </li>
                </ul>
            </nav>
        </header>
        <section class="stretch">
            <p>Make menu small</p>
            <p>End of the line.</p>
        </section>
        <script type="text/javascript" src="menu.js"></script>
    </body>
</html>
下面是CSS：

body{ background-color: #ebebeb; }
ul{ float: right; }
li{ display: inline; float: left;} img.logo{float: left;}
/* Size and center the menu */ nav{ width: 960px; margin: 0 auto;} 

section.stretch{ float: left; height: 1500px; width: 100%; }
section.stretch p{ font-family: 'Amaranth', sans-serif; font-size: 30px; color: #969696; text-align: center; position: relative; margin-top: 250px; }
section.stretch p.bottom{ top: 100%; } 

header{ background: #C7C7C7; border-bottom: 1px solid #aaaaaa; float: left; width: 100%; position: fixed; z-index: 10; }
header a{ color: #969696; text-decoration: none; font-family: 'Amaranth', sans-serif; text-transform: uppercase; font-size: 1em; }
header a.active, header a:hover{ color: #3d3d3d; }
header li{ margin-right: 30px; }

/* Sizes for the bigger menu */
header.large{ height: 120px; }
header.large img{ width: 489px; height: 113px; }
header.large li{ margin-top: 45px; }

/* Sizes for the smaller menu */
header.small{ height: 50px; }
header.small img{ width: 287px; height: 69px; margin-top: -10px; }
header.small li{ margin-top: 17px; }
包含在代码中，那么代码就可以正常工作

在头部标签中，包括以下内容：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
之后它应该可以正常工作。

它可以正常工作：问题是页眉没有改变。它仍然是一样的。嗨，乔，我在jsfiddle上试用过，它有时有效，有时无效。即使我在尝试完全相同的代码。当我尝试使用浏览器时，它永远不会工作。标题保持不变@JoeIt一直在多个浏览器中为我工作。你在使用哪种浏览器？我已经尝试了所有主要的浏览器：嗨，桑吉夫，谢谢你的回复！我应该在哪里添加这个？在文件名中？Hi Karolina，正如你所看到的，这是一个javascript文件。因此，您必须使用script标记添加此文件。如需更多帮助，请参阅上述链接，查看处于工作状态的代码。最后！！！它工作！！！所有这些jquery链接的区别是什么？谢谢大家!@ElmerIn为了使用jQuery，必须包含库。所以你必须把它包括在。上面显示的所有链接都是相同的。我觉得你放错地方了。 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>