jquery implements tab switching effect-JS Tutorial-php.cn

jquery implements tab switching effect

小云云

Release： 2018-01-12 13:10:00

Original

1924 people have browsed it

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(&#39;current&#39;).siblings().removeClass(&#39;current&#39;);
  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){
    $(&#39;.line&#39;).animate({&#39;left&#39;:&#39;0px&#39;},300);
   }else{
    $(&#39;.line&#39;).animate({&#39;left&#39;:&#39;150px&#39;},300);
   }
  }    
 })
 $spans.mouseout(function(){
  var index=$spans.index(this);
  var cName=$(this).attr("class");
  if(cName!="current"){
   if(index==0){
   $(&#39;.line&#39;).animate({&#39;left&#39;:&#39;150px&#39;},300);
   }else{
   $(&#39;.line&#39;).animate({&#39;left&#39;:&#39;0px&#39;},300);
   }
 　　 }      
 })
}）

Copy after login

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!