天天饱

如果你只做自己能力范围之内的事情,就永远没法进步

选项卡实现

实现效果:

JQ简单选项卡实现,实现原理:当点击选项卡栏目时为当前栏目添加一个class,然后通过index()获得其为第几个栏目,然后通过eq()选择对应的内容显示。

布局代码:

<style>
.tab{width: 245px;height: 160px;}
    .tab .tab_menu{width: 100%;height: 30px;border-bottom: 1px solid #ccc;text-align: left;}
    .tab .tab_menu li{width: 100px;height: 30px;line-height: 30px;text-align: center;float:left;background-color: #eee;margin-right: 2px;}
    .tab .tab_menu li:hover{cursor: pointer;*cursor: hand;background-color: #ddd;}
    .tab .tab_menu li.current{background-color: #1e8cd2;color: #fff;}
    .tab .tab_content{width: 100%;height: 129px;position: relative;overflow: hidden;}
    .tab .tab_content>div{width: 94%;height: 119px;display: block;padding: 5px 3%;position: absolute;left: 0;top:0;display: none;}
    .tab .tab_content>div li{width: 100%;line-height: 28px;height: 28px;overflow: hidden;display: inline-block;*display: inline;*zoom:1;}</style>

<div class="tab">
  <!--栏目--> <div class="tab_menu"> <ul> <li>栏目1</li> <li>栏目2</li> </ul> </div>
  <!--内容--> <div class="tab_content"> <div class="tab_container"> <ul> <li> <a href="">a</a> </li> <li> <a href="">b</a> </li> </ul> </div> <div class="tab_container"> <ul> <li> <a href="">1</a> </li> <li> <a href="">2</a> </li> </ul> </div> </div> </div>

 JQ实现:

$('.tab_menu>ul>li:first').addClass('current');
var tabNum = $('.tab_menu>ul>li').index($('.tab_menu>ul>li.current'));
$('.tab_content .tab_container').eq(tabNum).show();
$('.tab_menu>ul>li').click(function(){
    var tabNumOld = $('.tab_menu>ul>li').index($('.tab_menu>ul>li.current'));
    var tabNumHover = $('.tab_menu>ul>li').index(this);
    if(tabNumOld == tabNumHover){
        return false;
    }
    $('.tab_menu>ul>li').finish().removeClass('current').eq(tabNumHover).addClass('current');
    $('.tab_content .tab_container').finish().hide().eq(tabNumHover).show();
})

 最终效果

  
  • 栏目1
  • 栏目2
  
posted @ 2016-10-13 17:55  天天饱  阅读(199)  评论(0编辑  收藏  举报