美女相册案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>美女相册案例</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
ul li img{
width: 200px;
height: 180px;
}
body img{
width: 400px;
}
</style>
</head>
<body>
<ul class="nav nav-tabs">
<li><a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529579282512&di=14ce7bd3868ca3fc84f85518dccb3841&imgtype=0&src=http%3A%2F%2Fstatics.glshimg.com%2Fforum%2Fdvbbs%2F2007-4%2F200742917262034114.jpg" alt=""></a></li>
<li><a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529579282507&di=da19b2832fff6104239c0debabaf4383&imgtype=0&src=http%3A%2F%2Fimg05.tooopen.com%2Fimages%2F20150807%2Ftooopen_sy_137154466295.jpg" alt=""></a></li>
<li><a href=""><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3261489058,2652671941&fm=27&gp=0.jpg" alt=""></a></li>
<li><a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529579343919&di=ee2136c68ae5c815a3cac31cd0f24667&imgtype=0&src=http%3A%2F%2Fimage.haha.mx%2F2015%2F06%2F02%2Fmiddle%2F1810886_d1a7993ae988a18b5241859f9819a2e1_1433219644.jpg" alt=""></a></li>
</ul>
<img src="" alt="">
<span style="font-size: 48px;color: red">美女1</span>
<span style="font-size: 48px;color: red">美女2</span>
<span style="font-size: 48px;color: red">美女3</span>
<span style="font-size: 48px;color: red">美女4</span>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script>
$(function(){
$("a").attr('href', '#');
$("span").css('display', 'none');
$('li').click(function(){
var img=$(this).find('img').attr('src');
$('body>img').attr('src', img);
$("span").eq($(this).index()).css('display', 'inline-block').siblings('span').css('display', 'none');
});
});
</script>
</body>
</html>