<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<title>Document</title>
<style>
*{margin:0;padding:0;}
.out{margin:0 auto;width:40%;}
.menu li{display: inline-block;margin-left: 80px;}
.menu li:hover{cursor: pointer;}
.content{padding:30px;width:500px;height:200px;border:1px solid #ccc;}
.current{background-color: red;color:yellow;}
.hide{display: none;}
</style>
</head>
<body>
<div>
<ul>
<li index="c1" onClick="tab(this);">第一集</li>
<li index="c2" onClick="tab(this);">第二集</li>
<li index="c3" onClick="tab(this);">第三集</li>
</ul>
<div>
<div id="c1" style="float:left"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513940569701&di=1f2d217e2126e04c0ffd84cf6120783c&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fimage%2Fcrop%253D0%252C0%252C640%252C406%2Fsign%3D5834c970d333c895b231c23bec235fc0%2Fd833c895d143ad4b8603f82788025aafa40f0623.jpg" width="300px"><h3>花满天</h3></div>
<div id="c2"><img src="http://img.taopic.com/uploads/allimg/121101/240513-1211012233208.jpg" width="300px"><h3>花无谢</h3></div>
<div id="c3"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513940221583&di=8c51ce3389607efa56e377c4985368e6&imgtype=0&src=http%3A%2F%2Fpic9.nipic.com%2F20100910%2F865813_110311071597_2.jpg" width="300px"><h3>花飞杨</h3></div>
</div>
</div>
<script>
function tab(self){
$(self)
.addClass("current")
.siblings()
.removeClass("current")
var box="#"+$(self).attr("index");
$(box)
.removeClass("hide")
.siblings()
.addClass("hide")
}
</script>
</body>
</html>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
