본 글의 예시는 참고용으로 jquery로 작성한 탭 전환 효과를 공유하기 위한 것입니다
효과 설명: 탭 탐색을 클릭하면 페이지가 아래 해당 섹션으로 슬라이드됩니다. 그리고 마우스로 페이지를 아래로 스크롤하면 위 탭도 자동으로 현재 위치의 섹션으로 전환될 수 있습니다.


코드 설명: js에서는 두 가지 작업을 별도로 작성합니다. 하나는 탭을 클릭하고 해당 섹션 위치로 아래로 슬라이드하는 것이고, 다른 하나는 현재 페이지의 스크롤 높이를 결정하고 탭을 전환하는 것입니다. 마우스가 아래로 스크롤됩니다.
js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | $(document).ready( function (){
$( '.switch-tab>li' ).click( function (){
var s=$( '.switch-tab>li' ).index(this);
$( 'body,html' ).animate({scrollTop:$( '.tab-content>.tab-panel:eq(' +s+ ')' ).offset().top-50},200);
});
var DT=$( '.switch-tab' ).offset().top;
$(window).scroll( function (){
var wt=$(window).scrollTop(),l=$( '.tab-content>.tab-panel' ),s=l.length-1;
if (wt<DT||wt>=l.last().offset().top+l.last().height()+50){
$( '.switch-tab' ).removeClass( 'fixed' );
$( '.switch-tab>li:first' ).addClass( 'active' ).siblings().removeClass( 'active' );
} else {
$( '.switch-tab' ).addClass( 'fixed' );
for ( var i=0;i<s;i++){
if (wt>=parseInt(l.eq(i).offset().top-50)&&wt<parseInt(l.eq(i+1).offset().top-50)){
s=i;
break ;
}
}
$( '.switch-tab>li:eq(' +s+ ')' ).addClass( 'active' ).siblings().removeClass( 'active' );
}
});
});
|
로그인 후 복사
html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <div class = "switch-nav" >
<ul class = "switch-tab" >
<li><a href= "javascript:; " >拉托红酒</a></li>
<li><a href= "javascript:; " >法国酒庄风情</a></li>
<li><a href= "javascript:; " >红酒包装</a></li>
<li><a href= "javascript:; " >个性定制</a></li>
</ul>
</div>
<div class = "tab-content" >
<div class = "tab-panel" id= "cpxq" >
1111
</div>
<div class = "tab-panel" id= "cpxq" >
222
</div>
<div class = "tab-panel" id= "cpxq" >
333
</div>
<div class = "tab-panel" id= "cpxq" >
444
</div>
</div>
|
로그인 후 복사
위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.