Question

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

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

暂停代码有什么问题

工作代码（当Java脚本位于＆＃39;标记时）

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

Answer 1

如果您声明了doctype（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');
        });
    });
});

最后缺少; ..

如何从外部文件导入JavaScript？

1 个答案: