如何切换列表

想要实现一个切换列表的功能，以下是我的代码。

<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显示对应的内容，不知道怎么实现，求大神求解。