Cet article présente principalement jquery pour réaliser l'effet de changement d'onglet, le survol et le déplacement de l'animation de ligne horizontale ci-dessous. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.
Implémenter simultanément le déplacement de l'animation de survol et de ligne horizontale inférieure :
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); } } }) })
Recommandations associées :
Partage sur l'effet d'onglet du plug-in JavaScript
Utilisation de CSS3 pur pour implémenter un exemple de changement d'onglet
JavaScript implémente l'onglet universel
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!