Github：img
一. 需求
假設有一個圖文混排的頁面，要求設計按鈕：
- 當用戶點擊這個按鈕的時候能把該頁面的所有圖片增加美化樣式（如高亮提醒），再點擊則取消提醒；
- 再設計一個按鈕，當用戶點擊的時候能夠顯示或者隱藏全文的圖片。
二. 代碼
img.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圖片的功能：高亮/隱藏</title>
<link rel="stylesheet" type="text/css" href="img.css" />
</head>
<body>
<button id="btn1">img!</button>
<button id="btn2">img?</button>
<p>JavaScript</p>
<img src="imgs/javascript.jpg" />
<p>HTML & CSS</p>
<img src="imgs/htmlcss.jpg" />
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="img.js"></script>
</html>
省略 img.css ?
img.js
$(document).ready(function() {
$("button#btn1").click(function() {
$("img").toggleClass("red");
});
$("button#btn2").click(function() {
$("img").toggleClass("hide");
})
});
三. 效果
- 默認
![1]()
- 點擊 “img!" 高亮提醒圖片，再點擊取消。
![2.1]()
![2.2]()
- 點擊 “img” 隱藏圖片，再點擊取消。
![3.1]()
![3.2]()
