码迷,mamicode.com
首页 > 其他好文 > 详细

选项卡

时间:2017-09-27 18:58:26      阅读:111      评论:0      收藏:0      [点我收藏+]

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!