<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<title>Title</title>
<style>
* {
margin: 0;
padding-left:5px;
}
.top{
padding-top: 100px;
margin: 0 auto;
width: 30%;
}
.nv{
background-color: #00a2d4;
border: 1px solid #bbb;
line-height: 40px;
font-size: 1.1em;
}
.nv li{
display: inline-block;
color: white;
}
.hide{
display: none;
}
.show{
background-color: #00B83F;
}
</style>
</head>
<body>
</body>
<div class="top">
<ul class="nv">
<li index="c1" class="show" onclick="tab(this);">比尔盖茨</li>
<li index="c2" onclick="tab(this);">扎克伯格</li>
<li index="c3" onclick="tab(this);">巴菲特</li>
<li index="c4" onclick="tab(this);">乔布斯</li>
<li index="c5" onclick="tab(this);">朱老师</li>
<li index="c6" onclick="tab(this);">猪哥</li>
</ul>
<div class="content">
<div id="c1" style="float: left">
<img src="http://www.ihuakee.com/homework/img/1.jpg" alt="">
</div>
<div id="c2" class="hide">
<img src="http://www.ihuakee.com/homework/img/2.jpg" alt="">
</div>
<div id="c3" class="hide">
<img src="http://www.ihuakee.com/homework/img/3.jpg" alt="">
</div>
<div id="c4" class="hide">
<img src="http://www.ihuakee.com/homework/img/4.jpg" alt="">
</div>
<div id="c5" class="hide">
<img src="http://www.ihuakee.com/homework/img/5.jpg" width="268" alt="">
</div>
<div id="c6" class="hide">
<img src="http://www.ihuakee.com/homework/img/6.jpg" width="268" alt="">
</div>
</div>
</div>
<script>
function tab(self) {
$(self).addClass('show')
.siblings()
.removeClass('show')
var box = "#"+$(self).attr('index')
$(box).removeClass('hide')
.siblings()
.addClass('hide')
}
</script>
</html>
