选项卡

Posted 2020-10-08

选项卡多个选项

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();
                });
            });