首页 > 其他 > 详细

选项卡

时间:2017-09-27 18:36:32      阅读:249      评论:0      收藏:0      [点我收藏+]

选项卡多个选项

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

  

选项卡

原文:http://www.cnblogs.com/qing1304197382/p/7603090.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!