所以我觉得(并希望)这很简单。我是 javascript 新手,正在尝试让它工作。当我从 html 链接到外部 .js 文件时,它不起作用。但是,当将脚本代码直接输入到我的 HTML 中时,它确实可以工作。
这是js文件:
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
这是index.html文件:
<!DOCTYPE html>
<html>
<head>
<title>slidepanel test</title>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
</body>
</html>
这是 CSS:
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
您正在使用 jQuery,但您似乎没有包含它。将其添加到您的 HEAD 元素
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
您需要导入 jQuery。
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
实际上,我遇到了这样的问题,我尝试了下面的代码。
<head>
<meta charset="ISO-8859-1">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
我也有类似的问题。 下面是两个文件中的代码,它仅生成白色的空白页面, 执行代码没有报错,请问是什么问题?
index.html 文件:
<!DOCTYPE html>
<html>
<head>
<title>Three.js</title>
<style type = "text/css">
html, body {margin: 0; padding: 0; overflow: hidden}
</style>
</head>
<body>
<div id = "webgl"></div>
<script src = "/lib/three.js"></script>
<script src="./main.js"></script>
</html>
main.js 文件:
function init() {
var scene = new THREE.Scene();
var box = getBox(1, 1, 1);
var plane = getPlane(4);
box.position.y = box.geometry.parameters.height/2;
plane.rotation.x = Math.PI/2;
scene.add(box);
scene.add(plane);
var camera = new THREE.PerspectiveCamera(
45,
window.innerWidth/window.innerHeight,
1,
1000
);
camera.position.x = 1;
camera.position.y = 2;
camera.position.z = 5;
camera.lookAt(new THREE.Vector3(0, 0, 0));
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('webgl').appendChild(renderer.domElement);
renderer.render(
scene,
camera
);
}
function getBox(w, h, d) {
var geometry = new THREE.BoxGeometry(w, h, d);
var material = new THREE.MeshBasicMaterial({
color: 0x00ff00
});
var mesh = new THREE.Mesh(
geometry,
material
);
return mesh;
}
function getPlane(size) {
var geometry = new THREE.PlaneGeometry(size, size);
var material = new THREE.MeshBasicMaterial({
color: 0xff0000,
side: THREE.DoubleSide
});
var mesh = new THREE.Mesh(
geometry,
material
);
return mesh;
}
init();
您的
<head>
部分中没有 jquery。在添加scripts.js
之前添加它。只有这样你的代码才能工作。
<head>
<title>slidepanel test</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
如果您在本地计算机上测试此功能,请将
http
添加到 src 或下载您自己的 jQuery 副本。
作为旁注,最好在
stylesheets
文件之前添加 js
。
看起来你缺少 jQuery。在包含您自己的 JavaScript 代码之前包含它。
您的脚本包含 jQuery。为了使用它,您有 2 个选项:
<head></head>
部分添加:<script src="jquery-1.11.3.min.js"></script>
<head></head>
部分来使用Google的CDN:<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
我也遇到了同样的问题,直到我将行的位置更改为结束标记之前的代码末尾并且它起作用了。在我看来,位于标题的功能会被重写。
就我而言,这是因为我在脚本标签中指定了错误的
type
。应该是:
type="text/javascript"
希望这对其他人有帮助!