标签: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