<!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>
博客列表 >选项卡
选项卡
- 追梦者的博客原创转载
- 2017年12月22日 16:17:32630浏览
上一条：$.ajax使用方法下一条：简易的相册编辑器
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
