gpt4 book ai didi

javascript - 如何链接javascript和html

转载 作者:太空宇宙 更新时间:2023-11-04 03:08:39 25 4
gpt4 key购买 nike

我在一个非常简单的 html 文件上创建了一个非常简单的程序。我想简单地找出如何将 javascript 链接到 html 和 css。以下是我的示例代码:

(index.html)

<head>
<title>JavaScript</title>
<link rel="stylesheet" href="stylesheet.css"/>
</head>

<body>
<div class="picture">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZAb6KcZrNTBM1UflIMAQfAGuTKN0XWYFsiTgm5M5NRwXO_udT"/>
</div>

<button class="show_btn">Show</button>
<button class="hide_btn">Hide</button>

<script src="script.js"></script>

</body>

JS:

$(document).ready(function(){ 
$(".hide_btn").click(function(){
$("p").slideUp();
});
$(".show_btn").click(function(){
$("p").slideDown();
});
});

CSS:

 .picture { display: none; } 

现在使用这段代码,我试图使用两个按钮来显示和隐藏一条鱼的图片......但是我似乎无法让它工作,我相信这与我的方式有关正在链接我的文件。请帮忙!

最佳答案

根据您对问题的评论,您似乎正在使用 jQuery,但您没有将 jQuery 作为源代码的一部分。

您需要在 script.js 之上包含 jQuery 源代码。

下面是一个示例,说明如何将 Google CDN 用于 jQuery 库:

<head>
<title>JavaScript</title>
<link rel="stylesheet" href="stylesheet.css"/>
</head>

<body>
<div class="picture">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZAb6KcZrNTBM1UflIMAQfAGuTKN0XWYFsiTgm5M5NRwXO_udT"/>
</div>

<button class="show_btn">Show</button>
<button class="hide_btn">Hide</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>

</body>

关于javascript - 如何链接javascript和html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29933597/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com