如何将JavaScript添加到HTML页面？
[英]How to add javascript to HTML Page?
问题描述
I am new to web development and I want to add following function to my simple html page but if I press "click me" does not happen anything. 
我是网络开发的新手，我想在我的简单html页面中添加以下功能，但如果我按下“click me”就不会发生任何事情。 description part does not hide and show 描述部分不隐藏和显示
This is the code I tried 这是我试过的代码
I added those codes as below. 我添加了以下代码。 CSS is working perfectly. CSS工作得很好。 but JavaScript does not work. 但JavaScript不起作用。 How can I fix this issue 我该如何解决这个问题
<html>
<head>
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="hpcss.css">
<script>
// Hide all the elements in the DOM that have a class of "box"
$('.box').hide();
// Make sure all the elements with a class of "clickme" are visible and bound
// with a click event to toggle the "box" state
$('.clickme').each(function() {
$(this).show(0).on('click', function(e) {
// This is only needed if your using an anchor to target the "box" elements
e.preventDefault();
// Find the next "box" element in the DOM
$(this).next('.box').slideToggle('fast');
});
});
</script>
</head>
<body align="center">
<a href="#" class="clickme">Click Me</a>
<div class="box">
First Description
</div>
<a href="#" class="clickme">Click Me</a>
<div class="box">
Second Description
</div>
</body>
</html>
5 个解决方案
解决方案1
5 2015-02-03 06:51:45
You need to import jQuery, and only run the code once jQuery has loaded 您需要导入jQuery，并且只在jQuery加载后运行代码
HTML : HTML ：
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
JS : JS ：
$(function() {
// your code here
})
The fiddle is working because jsfiddle automatically runs on DOM load, and inserts jQuery for you. 这个小提琴正在运行，因为jsfiddle自动在DOM加载上运行，并为您插入jQuery 。
here is the actual source from jsfiddle (behind the scenes): 这里是来自jsfiddle （幕后）的实际来源：
<script type='text/javascript'>//<![CDATA[
$(function(){
// Hide all the elements in the DOM that have a class of "box"
$('.box').hide();
// Make sure all the elements with a class of "clickme" are visible and bound
// with a click event to toggle the "box" state
$('.clickme').each(function() {
$(this).show(0).on('click', function(e) {
// This is only needed if your using an anchor to target the "box" elements
e.preventDefault();
// Find the next "box" element in the DOM
$(this).next('.box').slideToggle('fast');
});
});
});//]]>
</script>
解决方案2
2 已采纳 2015-02-03 06:53:16
you should do somethings like that: 你应该做那样的事情：
$(document).ready(function() {
// add your code here
})
you run javascript before finishing load html --> error 你在完成加载html之前运行javascript - >错误
解决方案3
2 2015-02-03 06:53:29
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
在你的脚本之前嵌入这个。
解决方案4
1 2015-02-03 06:53:02
Try to wrap your js code into 尝试将你的js代码包装进去
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function() {
// your code will be here
});
</script>
It means that your code will be executed after page elements are loaded. 这意味着您的代码将在加载页面元素后执行。 Also I'v added jquery include. 另外我添加了jquery包括。
解决方案5
0 2015-02-03 06:55:42
You attach the events before the DOM is created. 您在创建DOM之前附加事件。 When you're calling 当你打电话的时候
// Make sure all the elements with a class of "clickme" are visible and bound
// with a click event to toggle the "box" state
$('.clickme').each(function() {
$(this).show(0).on('click', function(e) {
// This is only needed if your using an anchor to target the "box" elements
e.preventDefault();
// Find the next "box" element in the DOM
$(this).next('.box').slideToggle('fast');
});
});
The elements with the clickme class have not been created yet. 尚未创建具有clickme类的元素。
You can fix it by putting your script tags before the </body> tag, but by wrapping your javascript in a self-executing function like so: 您可以通过将脚本标记放在</body>标记之前修复它，但是将javascript包装在一个自执行函数中，如下所示：
$(function()
{
// Hide all the elements in the DOM that have a class of "box"
$('.box').hide();
// Make sure all the elements with a class of "clickme" are visible and bound
// with a click event to toggle the "box" state
$('.clickme').each(function() {
$(this).show(0).on('click', function(e) {
// This is only needed if your using an anchor to target the "box" elements
e.preventDefault();
// Find the next "box" element in the DOM
$(this).next('.box').slideToggle('fast');
});
});
});
Also, you're not including the jQuery library. 此外，您不包括jQuery库。
Always check the console for errors. 始终检查控制台是否有错误。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.