Home > Article > Web Front-end > jquery implements tab switching effect
This article mainly introduces jquery to implement tab switching effect, hover, and horizontal line animation displacement below. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.
Simultaneously achieve hovering and horizontal line animation displacement below:
Code:
<sytle> *{margin:0;padding:0; } .box{position:relative;font-size:0;} .box span{display:inline-block;width:150px;height:40px;line-height:40px;text-align:center;background:#eee;font-size:16px;} .line{position:absolute;width:150px;height:3px;background:#059;left:0;bottom:0;} </style> <p class="box" id="switch"> <span class="current">新闻资讯</span> <span>公司动态</span> <p class="line"></p> </p> $(function(){ var $spans=$("#switch span"); $spans.click(function(){ $(this).addClass('current').siblings().removeClass('current'); var index=$spans.index(this); //$("#content .detail").eq(index).show().siblings().hide(); //$("#fr .bar").eq(index).show().siblings().hide(); }) $spans.mouseover(function(){ var index=$spans.index(this); var cName=$(this).attr("class"); if(cName!="current"){ if(index==0){ $('.line').animate({'left':'0px'},300); }else{ $('.line').animate({'left':'150px'},300); } } }) $spans.mouseout(function(){ var index=$spans.index(this); var cName=$(this).attr("class"); if(cName!="current"){ if(index==0){ $('.line').animate({'left':'150px'},300); }else{ $('.line').animate({'left':'0px'},300); } } }) })
Related recommendations:
About JavaScript plug-in Tab effect sharing
Using pure CSS3 to implement tab switching example
JavaScript to implement universal tab
The above is the detailed content of jquery implements tab switching effect. For more information, please follow other related articles on the PHP Chinese website!