如何将javascript添加到HTML页面

How to add javascript to HTML Page?

本文关键字：HTML 页面 添加 javascript      更新时间：2023-09-26

我是Web开发的新手，我想在我的简单html页面中添加以下功能，但是如果我按"单击我"不会发生任何事情。 描述部分不隐藏和显示

这是我尝试过的代码

我添加了这些代码，如下所示。CSS运行良好。但是JavaScript不起作用。如何解决此问题 

<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>

你需要导入 jQuery，并且只有在 jQuery 加载后才运行代码

HTML：

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

JS：

$(function() {
    // your code here
})

小提琴正在工作，因为jsfiddle在 DOM 加载时自动运行，并为您插入jQuery。

以下是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>

你应该做这样的事情：

$(document).ready(function() {
  // add your code here
})

您在完成加载 HTML 之前运行 JavaScript -->错误

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

在脚本之前嵌入此内容。

尝试将 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>

这意味着您的代码将在加载页面元素后执行。我还添加了jquery包含。

在创建 DOM 之前附加事件。当您呼叫时

// 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');
    });
});
尚未

创建具有 clickme 类的元素。

您可以通过将脚本标签放在 </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');
        });
    });
});

此外，您不包括jQuery库。

始终检查控制台是否存在错误。

相关文章：