如何从外部文件导入 JavaScript

How to Import JavaScript from external file?

本文关键字：导入 JavaScript 文件 从外部      更新时间：2023-09-26

我创建了简单的HTML页面，并在标签中导入了JavaScript。它工作正常（当单击div s 时，使其可见并隐藏）

我想从外部文件导入 JavaScript，我进行了如下更改。然后隐藏的div始终可见，无法隐藏并手动可见

休耕代码有什么问题

工作代码（当 Java 脚本在"head"标签中时） 

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://hp-parts.orgfree.com/hpcss.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(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>
</head>
<body align="center">
<h1>HP Laptop Parts</h1>
<h2>Compatible with G62 CQ62 G56 CQ56 & MORE   </h2>
<a href="#" class="clickme">Keyboard housing Top Cover </a>
<div class="box">
    <img src="http://hp-parts.orgfree.com/images/Housing/DSC_0308.jpg">
</div>
<a href="#" class="clickme">Touchpad Buttons Board , Cable & Frame</a>
<div class="box">
    <img src="http://hp-parts.orgfree.com/images/Keypad%20Buttons/DSC_0280.jpg">
</div>
</body>
</html>

我将代码更改为波纹管。

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://hp-parts.orgfree.com/hpcss.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="myjs.js"></script>
</head>
<body align="center">
<h1>HP Laptop Parts</h1>
<h2>Compatible with G62 CQ62 G56 CQ56 & MORE   </h2>
<a href="#" class="clickme">Keyboard housing Top Cover </a>
<div class="box">
    <img src="http://hp-parts.orgfree.com/images/Housing/DSC_0308.jpg">
</div>
<a href="#" class="clickme">Touchpad Buttons Board , Cable & Frame</a>
<div class="box">
    <img src="http://hp-parts.orgfree.com/images/Keypad%20Buttons/DSC_0280.jpg">
</div>
</body>
</html>

myjs.js文件

$(document).ready(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');
    });
});
})

如果你声明一个文档类型（html 5 doctype）。

http://www.w3schools.com/tags/tag_DOCTYPE.asp

..无需为脚本标记指定类型。

此外，您还需要使用 / 到达路径的基础。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://hp-parts.orgfree.com/hpcss.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="/myjs.js"></script>
</head>

还有你的脚本：

$(document).ready(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');
        });
    });
});

失踪 ; 在最后..

相关文章：