>  기사  >  웹 프론트엔드  >  jquery는 탭 전환 효과를 구현합니다.

jquery는 탭 전환 효과를 구현합니다.

小云云
小云云원래의
2018-01-12 13:10:001907검색

이 기사는 아래에서 탭 전환 효과, 호버 및 수평선 애니메이션 변위를 달성하기 위한 jquery를 주로 소개합니다. 관심 있는 친구들이 모두 참고할 수 있기를 바랍니다.

호버링과 아래쪽 수평선 애니메이션 변위를 동시에 달성:

코드:


<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);
   }
    }      
 })
})

관련 권장 사항:

JavaScript 플러그인 탭 탭 효과 공유 정보

순수한 CSS3 사용 탭 옵션 구현 카드 전환 예시

JavaScript로 범용 탭 탭 구현

위 내용은 jquery는 탭 전환 효과를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.