Question

这是我的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”没有被注释掉，只是问题中的格式如此。

Answer 1

查看您的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%' });
    });
} );

使用委托活动

这样：

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

Answer 2

编辑;对不起，你已经做到了。

尝试在js库文件下推送你的js文件。

为什么我的网页转换不起作用？（HTML，CSS，JavaScript）

2 个答案:

为什么我的网页转换不起作用？ （HTML，CSS，JavaScript）

2 个答案:

为什么我的网页转换不起作用？（HTML，CSS，JavaScript）