上导航栏，下内容响应变化

一、点击导航栏，下面内容相应切换
二、代码
1、css部分

.mes{
 width:945px;
 margin:auto;
 border:solid #ccc 1px;
 margin-top:5px;
 background: #fff;
 }
.mes_title{
 width:100%;
 height:40px;
 margin:auto;
 border-bottom:solid #ccc 1px;
 background-color:#fff;
 line-height:30px;
 }
.mes_title_content{
 width:100%;
 margin:auto;
 border:solid #ccc 1px;
 padding-top:20px;
}
#mes_tags { 
    margin: 0px; 
    width:900px; 
    padding:0px; 
    height:40px;
}
#mes_tags li { 
    float: left;
    list-style-type: none; 
    height: 40px;
}
#mes_tags li a { 
    padding-right:20px; 
    padding-left: 20px; 
    float: left; 
    padding-bottom: 0px; 
    color: #333; 
    line-height: 40px;
    padding-top: 0px; 
    height:40px;
    text-decoration: none;
    font-size:14px;
    background-color:#f4f4f4;
}
#mes_tags  li.select_con { 
    background-position: left top;
    margin-bottom: -2px; 
    position: relative; 
    height: 30px;
}
#mes_tags li.select_con a{ 
    background-position: right top;  
    height: 40px;
    color:#fff;
    background-color:#32C96A;
}
#mes_con { 
    width:100%;
    margin:0 auto;
    /*border: #ccc 1px solid; */
    background-color: #fff;
    padding-bottom:10px;
    padding-top:10px;
}
#mes_con a{
 text-decoration:none;
}
.mes_con {
 padding-right: 10px; 
 padding-left: 10px;
 padding-bottom: 10px; 
 padding-top: 10px;
 display: none;
 width:100%; 
 margin:0 auto;
 color: #474747;
 }
 #mes_con div.select_con { 
    display: block 
}
#mes_con div.select_con li{
 list-style:none;
 font-size:16px;
 color:#00C;
 line-height:30px;
 margin-left:30px; 
}

2、js部分

function select_con(showContent,selfObj){
 // 操作标签
 var tag = document.getElementById("mes_tags").getElementsByTagName("li");
 var taglength = tag.length;
 for(i=0; i<taglength; i++){
  tag[i].className = "";
 }
 selfObj.parentNode.className = "select_con";
 // 操作内容
 for(i=0; j=document.getElementById("mes_con"+i); i++){
  j.style.display = "none";
 }
 document.getElementById(showContent).style.display = "block";
}

3、html部分

<div class="mes">
<div class="mes_title">
  <ul id=mes_tags>
    <li class=select_con><a onClick="select_con('mes_con0',this)" 
  href="javascript:void(0)">产品详情</a> </li>
    <li><a onClick="select_con('mes_con1',this)" 
  href="javascript:void(0)">适用车型</a> </li>
    <li><a onClick="select_con('mes_con2',this)" 
  href="javascript:void(0)">产品规格</a> </li>
  </ul>
 </div>
  <div id=mes_con>
    <div  class="mes_con select_con" id=mes_con0>
      2
    </div>
        
    <div  class=mes_con id=mes_con1>
      3
    </div>
    
    <div class=mes_con id=mes_con2>
      4
    </div>
   </div>
</div>

三、效果图