無法獲取toggleClass工作

已解決！添加在頭這個腳本鏈接：無法獲取toggleClass工作

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

我一直試圖讓這個簡單的代碼來了好幾個小時的工作，但需要幫助，因爲它似乎並沒有工作。

我在js文件中使用toggleClass來切換標題上的類。我嘗試了所有可能的方式，也嘗試了它在jsfiddle中，它有時甚至有時甚至沒有相同的代碼。所以有些事情肯定是錯的。

這裏是我的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>

這裏是在js文件的腳本代碼：

$(document).on("scroll", function() { 
    $("header").toggleClass("small", $(document).scrollTop() > 100); 
});

這裏是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; }

來源

2013-08-24 Lisa

它按預期工作：http://jsfiddle.net/kPRaK/ – Joe

問題是標題不會改變。它仍然是一樣的。 – Lisa

嗨，喬，我試過它在jsfiddle和它有時有時，有時不工作。即使我正在嘗試完全相同的代碼。當我嘗試瀏覽器時，它永遠不會工作。標題保持不變... @Joe – Lisa

在head標籤，包括此：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

應該以後的工作。

來源

2013-08-24 20:30:23 Elmer

最後!!!它的工作原理!!!是什麼在所有這些環節的jQuery的區別嗎？謝謝！@Elmer – Lisa

爲了使用jQuery，喲你必須包括圖書館。所以你必須把它包含在''中。上面顯示的所有鏈接都是相同的。我不認爲你把它放在正確的地方。 – Elmer

包括jquery.min.js在你的代碼中，然後你的代碼將正常工作。 See your code in working condition。

來源

2013-08-24 20:15:28

嗨Sanjeev，感謝您的答覆！確切位置在哪裏，我要補充的？在文件名？ – Lisa

卡羅利納嗨，就像你看到的，這是一個JavaScript文件。所以，我只好加該文件中使用的腳本。如需更多幫助，請參閱上述鏈接（「看你的代碼的工作條件」）。 –

無法獲取toggleClass工作

回答

相關問題