1.使用css()方法添加图片边框,单击图片显示图片bian边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="imgs/pic.gif" class="tup"/>
<script src="js/jquery-3.3.1.js"></script>
<script>
$(function () {
$(".tup").click(function () {
$(".tup").css("border","1px solid");
});
});
</script>
</body>
</html>
2.制作林微因简介页面,单击林微因简介链接显示简介内容,单击主要作品链接显示对应的作品
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>林微因简介</title>
<style>
h1{
color: white;
background: orangered;
}
</style>
</head>
<body>
<h1 class="yi">林徽因简介</h1>
<div class="jian">
<p>林徽因,女,汉族,原名林徽音,出生于浙江杭州,祖籍福建福州。中国著名建筑家、诗人、作家。人民英雄纪念碑和中华人民共和国国徽深化方案的设计者</p>
<p>林徽因是建筑师梁思成的第一任妻子。三十年代初,与夫婿梁思成用现代科学方法研究方法研究中国古代建筑,成为这个学术领域的开拓者。</p>
</div>
<h1 class="er">主要作品</h1>
<div class="zuo">
<p>《你是人间四月天》</p>
<p>《宝莲灯》</p>
<p>《九十九度中》</p>
</div>
<script src="js/jquery-3.3.1.js"></script>
<script>
$(function () {
$(".jian") .hide();
$(".zuo").hide();
$(".yi").click(function () {
$(".jian").show();
});
$(".er").click(function () {
$(".zuo").show();
});
});
</script>
</body>
</html>