<!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>
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)
