这是我的 HTML:
<!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”没有被注释掉，它只是碰巧在问题中这样格式化。
最佳答案
查看您的 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 Ready):
这样的:
$( function () {
$("#myLink").click(function () {
$('#newPage').transition({top: '0%' });
});
} );
- 使用委托(delegate)事件
这样的:
$(document).on("click", "#myLink", function () {
$('#newPage').transition({top: '0%' });
});
关于javascript - 为什么我的网页转换不起作用？ (HTML、CSS、JavaScript)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31516293/