html+css+js实现选项卡切换（车辆外观、主体框架、其他检测切换）

注意：js部分代码是否与外链的js的代码起冲突，1、命名上的冲突2、耗性能js代码都不能实现选项卡效果

//css部分

/*车辆外观部分总div*/
.carAll{height:50px; margin:10px 0 20px 0;padding-left: 200px;}
.carAll .carBox{ width:752px;list-style:none; font-weight:bold; font-size:14px; background:url(images/lineCar_bg.png) no-repeat right center; margin:0;padding:0;overflow: hidden;}
.carAll .carBox .active1{ border-bottom:3px solid #f99629; color:#f99629; }

.carAll .carBox li{ width:250px; height:32px; line-height:32px; text-align:center; background:url(images/lineCar_bg.png) no-repeat left center;float:left; cursor:pointer;}

.carBox-line{ border-bottom:1px solid #ccc; margin-top:-2px; width:750px;}

<script src="../js/jquery-1.4.2.js"></script>

//js部分

<script type="text/javascript">
//北京海南地区切换
$(function(){
$(".carAll li").click(function(){

$(".carAll li").removeClass("active1");
$(this).addClass("active1");
if($(this).attr("area") == "bj"){

$("#bj").show();
$("#hn").hide();
$("#all").hide();
}else if($(this).attr("area") == "hn"){
$("#bj").hide();
$("#all").hide();
$("#hn").show();
}else if($(this).attr("area") == "all"){
$("#bj").hide();
$("#hn").hide();
$("#all").show();
}
});

});
</script>
</head>

<!--HTML部分-->

<body>
<div class="carAll">
<ul class="carBox">
<li class="active1" area="all">车辆外观</li>
<li class="area-bj" area="bj">主体框架</li>
<li class="testing" area="hn">其他检测</li>

<!--<li class="area-all active" area="all">全部</li>
<li class="area-bj" area="bj">北京地区</li>
<li class="area-hn" area="hn">海南地区</li>-->

</ul>

<div class="carBox-line"></div>
</div>
<!--车辆外观区域开始-->
<div class="alcWrap" id="all" style="display:block;">
车辆外观
</div>
<!--车辆外观区域结束-->

<!--主体框架区域开始-->
<div class="alc" id="bj" style="display:none;">
主体框架
</div>
<!--主体框架结束-->

<!--其它检测区域开始-->
<div class="alcWrap" id="hn" style="display:none;">
其他检测
</div>
<!--其它检测区域结束-->
</body>
</html>

posted @ 2014-09-16 14:15  photoshop爱好者  阅读(252)  评论(0)    收藏  举报