jQuery Tab选项卡特效代码

来源:互联网 时间:1970-01-01

Tab选项卡是现在应用开发中常用到的一些功能,下面我来介绍利用jQuery 快速实现Tab选项卡的方法,有需要学习了解的同学不防进入参考。

HTML代码

 代码如下 复制代码

<div class="tab">

<ul class="clearfix">

    <li class="current"><a href="#">标签1</a></li>

    <li><a href="#">标签2</a></li>

    <li><a href="#">标签3</a></li>

</ul>

<div class="current">

 <img src="images/upload/1.jpg" alt="1.jpg" /></div>

<div>

 <img src="images/upload/2.jpg" alt="2.jpg" /></div>

<div>

 <img src="images/upload/3.jpg" alt="3.jpg" /></div> </div>

jQuery代码

 代码如下 复制代码

function zvTab(){
    $(".tab ul li").each(function(index){
        $(this).mouseover(function(){
            var t = $(this);
            timeoutid = setTimeout(function(){
                $(".tab ul li.current").removeClass("current");
                t.addClass("current");
                $(".tab div.current").removeClass("current");
                $(".tab div").eq(index).addClass("current");
            },300);
        }).mouseout(function(){
            clearTimeout(timeoutid);
        });
    });
 
}


当然,这段JS代码要在JQ库被引入后且被执行才可用。

 代码如下 复制代码

.tab ul li {float:left;background:#CCC;margin-right:2px;border-bottom:2px solid #DDD;}
.tab ul li.current{background:#AAA;border-bottom:2px solid #AAA;}
.tab ul li a{color:#000;display:block;padding:5px 10px;}
.tab ul li.current a{color:#fff;display:block;padding:5px 10px;}
.tab div{display:none;}
.tab div.current{display:block;background:#AAA;color:#fff;padding:5px;margin-bottom:10px;}




相关阅读:
Top