收藏
<!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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
