jquery实现tab选项卡

1、css样式如下：

<style>

.tab-title{

width:800px;

margin:0 auto;

padding:20px;

overflow:hidden;

}

.tab-title li{

width:120px;

float:left;

padding:5px 0;

margin-right:20px !important;

font-size:18px;

background:#ccc;

cursor:pointer;

}

.tab-title .cur{

background:#66ba55;

color:#fff;

}

.tab-con{

overflow:hidden;

}

.tab-con ul{

display:none;

}

.tab-con .showcontent{

display:block;

}

</style>

2、js代码如下：

<script>

$(function (mocicoco.com) {

            $(".tab-title>li").mouseenter(function(){

                //1.获取鼠标移入的对象并让当前对象显示

                $(this).addClass("cur");

                //2.获取当前对象的所有同级的其余元素集合，并隐藏

                $(this).siblings().removeClass("cur");

                //3.获取当前li元素的索引

                var $index=$(this).index();

                //4.获取对应的ul中的li元素对象

                var $eq=$(".tab-con>ul").eq($index);

                //5.设置当前li元素可见

                $eq.addClass("showcontent");

                //6.获取当前对象的所有同级元素的集合，并隐藏

                $eq.siblings().removeClass("showcontent");

            });

        });

</script>

您的浏览器不支持 video 标签。

</video>

3、实现原理

1、单击一个元素时，首先将原来高亮的元素取消 

2、然后给被单击元素进行高亮 

3、如果单击元素是下拉框中某个选项，则选中本身，还要选中下拉框

 5、如果定义了动画，先执行动画，然后回调