如何切换列表
想要实现一个切换列表的功能，以下是我的代码。
<div class="nav-detail">
<div class="team-introduction"><span>OUR TEAM</span></div>
<div>
<div class="personel-group">
<ul id="personal-group-list">
<li class="red-line" index="1">
<div>
<span>tab1</span>
</div>
</li>
<li index="2">
<div>
<span>tab2</span>
</div>
</li>
<li index="3">
<div>
<span>tab3</span>
</div>
</li>
<li index="4">
<div>
<span>tab4</span>
</div>
</li>
</ul>
</div>
<div class="personel-group-picture">
<div class="manager-portrait">
<img src="../sprite/picture_03.png">
<img src="../sprite/picture_03.png">
<img src="../sprite/picture_03.png">
<img src="../sprite/picture_03.png">
</div>
<div class="product-portrait">2</div>
<div class="programmer-portrait">3</div>
<div class="other-portrait">4</div>
</div>
</div>
</div>
css:
nav-detail { text-align: center; }
.team-introduction { margin-top: 98px; margin-bottom: 60px; font-size: 24px; font-weight: bold; }
li { list-style-type: none; }
#personal-group-list li{
list-style-type: none;
display: inline-block;
width: 180px;
font-size: 18px;
color: #333;
float: left;
padding: 10px 0;
/*border-bottom: 1px solid #D3D3CA;*/
}
.red-line { border-bottom: 3px solid red; }
#personal-group-list li div {
display: inline;
width: 180px;
}
.personel-group {
text-align: center;
width: 720px;
margin-left: auto;
margin-right: auto;
}
.personel-group span { cursor: pointer; }
.personel-group-picture {
border-bottom: 1px solid #D3D3CA;
width: 1200px; margin: 0 auto;
}
.manager-portrait { padding: 60px 0 60px 0; height: 364px; }
.manager-portrait img { margin: 56px; }
.product-portrait { display: none; }
.programmer-portrait { display: none; }
.other-portrait { display: none; }
现在就是用js控制每一个tab,点击tab显示对应的内容，不知道怎么实现，求大神求解。
