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]()
