如何鏈接javascript和html
[英]how to link javascript and html
問題描述
我已經在非常簡單的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; }
現在有了這段代碼，我試圖使用兩個按鈕來顯示和隱藏一條魚的圖片……但是我似乎無法使其工作，並且我相信它與我鏈接我的方式有關。文件。 請幫忙！
6 個解決方案
解決方案1
1 2015-04-29 03:20:51
根據您對問題的評論，似乎您正在使用jQuery，但是您沒有將jQuery作為源代碼的一部分。
您將需要在script.js上方包含jQuery源。
這是使用jQuery庫的Google CDN時的外觀示例：
<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>
解決方案2
1 2015-04-29 04:16:15
試試這個在JavaScript
<html>
<head>
</head>
<body>
<div class="picture" id="picture">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZAb6KcZrNTBM1UflIMAQfAGuTKN0XWYFsiTgm5M5NRwXO_udT" />
</div>
<button class="show_btn" onclick="show();">Show</button>
<button class="hide_btn" onclick="hide();">Hide</button>
<script type="text/javascript" >
function show(){
var imgdiv = document.getElementById("picture");
imgdiv.style.display="block";
}
function hide(){
var imgdiv = document.getElementById("picture");
imgdiv.style.display="none";
}
</script>
</body>
</html>
解決方案3
0 2015-04-29 03:22:09
如果您使用的是jquery，則還需要在.js鏈接上方鏈接jquery源，
這是Google CDN（因此您不必下載它）：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
解決方案4
0 2015-04-29 03:25:13
我肯定會使用jQuery這樣的東西。 這是一個Plunker，顯示了如何實現此目的。
http://embed.plnkr.co/DwTwNuF162rfgcQOdT7u/preview
<html>
<head>
<script data-require="jquery@*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="picture" id="picture">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZAb6KcZrNTBM1UflIMAQfAGuTKN0XWYFsiTgm5M5NRwXO_udT" />
</div>
<button class="show_btn" onclick="show()">Show</button>
<button class="hide_btn" onclick="hide()">Hide</button>
</body>
<script>
function show() {
$('#picture').show();
}
function hide() {
$('#picture').hide();
}
</script>
</html>
解決方案5
0 2015-04-29 07:50:16
第一件事：
將其包括在您的<head> ：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
如果您使用的是Chrome，請嘗試使用開發者工具； 右鍵單擊頁面，然后檢查元素。 在開發人員工具窗格上，選擇CONSOLE選項卡，該選項卡將您的所有錯誤記錄在javascript中
並在您的腳本中嘗試：
$(document).ready(function() { $(".show_btn").click(function() { $(".picture").css('display', 'block'); }); $(".hide_btn").click(function() { $(".picture").css('display', 'none'); }); });
我也注意到您將div.picture顯示設置為“ none”。
解決方案6
0
您需要做的只是以下內容
<script type="text/javascript"></script>
您可以在script標簽內編寫javascript。 （如果您想在HTML中添加javascript
以下是將其鏈接到另一個文件。
<script src="path to other file" > </script>
如何將Javascript與HTML表單鏈接？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.