标签:menu 选项卡 fun select 多个 height ide cte ted
选项卡多个选项
1、html
<div class="carMenu"> <ul> <li class="selected">题目1</li> <li>题目2</li> <li>题目3</li> </ul> </div> <div class="carList"> <div class="carListInfo"> 一 </div> <div class="hide carListInfo"> 二 </div> <div class="hide carListInfo"> 三 </div> </div>
2、css
.carMenu li{
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
display: inline-block;
}
.selected{
background: #1a97d7;
}
.hide{
display: none;
}
3、js
$(function(){
var aLi=$(".carMenu ul li");
aLi.click(function(){
$(this).addClass(‘selected‘).siblings().removeClass(‘selected‘);
var index=$(this).index();
$(‘.carList .carListInfo‘).hide().eq($(this).index()).show();
});
});
标签:menu 选项卡 fun select 多个 height ide cte ted
原文地址:http://www.cnblogs.com/qing1304197382/p/7603090.html