爲什麼我的網頁過渡不工作？（HTML，CSS，JavaScript的）

這裏是我的HTML：爲什麼我的網頁過渡不工作？（HTML，CSS，JavaScript的）

<!DOCTYPE html> 
<html> 
<head> 
<link href="index.css" rel="stylesheet" type="text/css"> 
<script src="main.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
</head> 

<body> 
<a id="myLink" href="#"> 
      Click to slide in new page 
    </a> 


<iframe id="newPage" src="http://jsfiddle.net"></iframe> 
</body> 
</html>

這裏是我的CSS：

#myLink { 
position: absolute; 
} 

iframe { 
width: 100%; 
height: 100%; 
top: 100%;  
position: fixed; 
background-color: blue; 

}

而且我的JavaScript：

$("#myLink").click(function() { 
$('#newPage').transition({top: '0%' }); 
});

我從字面上複製從此源粘貼http://jsfiddle.net/TheGAFF/hNYMr/以實現使用iframe的網頁之間的轉換，但由於某種原因，當我在瀏覽器中嘗試此簡單代碼時，它不起作用。當我將它鏈接到index.html時，我看不出爲什麼這在我的瀏覽器中不起作用。誰能幫忙？謝謝。

編輯：CSS頁面中的「#myLink」沒有被註釋掉，它只是在問題中出現這樣的格式。

來源

2015-07-20 user3835653

看在F12控制檯錯誤/缺少資源 –

使用['< - 語言：郎CSS - >']（HTTP：//計算器。com/help/formatting）來將問題中的代碼格式化爲CSS。 – Xufox

查看您的JavaScript控制檯。預計看到有關$未被定義的錯誤。

看到這個代碼：

<script src="main.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

首先加載你的腳本，它會嘗試使用$。然後您嘗試加載jQuery，它定義了$。

交換訂單或腳本元素。

然後您有第二個問題。

$("#myLink")

在腳本運行時，文檔中沒有包含id="myLink"的元素。

它直到4行後才被添加到DOM。

或者：

移動腳本，以便它似乎您試圖訪問
使用的事件處理程序（如DOM就緒）的元素後：

這樣的：

$(function() { 
    $("#myLink").click(function() { 
     $('#newPage').transition({top: '0%' }); 
    }); 
});

使用委託事件

這樣的：

$(document).on("click", "#myLink", function() { 
    $('#newPage').transition({top: '0%' }); 
});

來源

2015-07-20 12:28:40 Quentin

好吧，我交換了我的jQuery庫腳本和我的main.js腳本的順序，並且使用了您描述的委託事件（複製了您的代碼），但它仍然不像JSFiddle那樣工作？還有其他問題嗎？順便謝謝你。我從來沒有意識到這個代碼的順序的影響：D。這個函數在鏈接被點擊時調用（我試着用alert（「hi」）;），所以我想問題是用$（'＃newPage'）。transition（{top：'0％'}） ;部分？ – user3835653

我使用了F12控制檯。它說$（...）。轉換不是一個函數。我認爲這是jQuery的功能？ JSFiddle中的人怎麼可以使用它，但它在這裏不起作用？ – user3835653

因爲它不是核心jQuery的一部分，所以你沒有加載你在JSFiddle上做的所有JS文件。 https://www.evernote.com/l/AAPsAI1Na5JCWZCT6YCto7-_DgnHeLjBfA4B/image.png – Quentin

編輯;對不起，你已經這樣做了。

試着把你的js文件放在js庫文件下。

來源

2015-07-20 12:20:45 Nathan

爲什麼我的網頁過渡不工作？ （HTML，CSS，JavaScript的）

回答

相關問題

爲什麼我的網頁過渡不工作？（HTML，CSS，JavaScript的）