一、点击导航栏,下面内容相应切换
二、代码
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>
三、效果图