Javascript는 탭 전환 효과를 구현합니다(자체 작성 네이티브 js)_javascript 기술
- WBOY원래의
- 2016-05-16 17:40:071712검색
오늘날 페이지에는 팝업 레이어 효과, 원활한 스크롤 효과, 탭 전환 효과 등 다양한 페이지 효과가 많이 사용됩니다. 오늘은 네이티브 자바스크립트를 이용해서 직접 작성한 탭전환 효과를 공유해보겠습니다. 제 실력이 부족해서 문제점이 있으면 지적해주세요.
렌더링은 다음과 같습니다. 
html 코드:
코드 복사 코드는 다음과 같습니다.
;meta charset="UTF-8">
tabs" id=" tabs">
홈페이지
< ;a href="javascript:;">기술
생활
작품
HomepageHomepageHomepageHomepageHomepageHomepage
< ;p class="tabs-content hide">worksworksworksworksworks
11111
22222
33333
11111111111111111111111111111111
-content hide">222222222222222222222222222222222223333333333333333333333333333333333333<
>
여기서 base.css는
내 CSS 프레임워크인 base.css
를 나타냅니다.
자바스크립트 코드
코드 복사
코드는 다음과 같습니다. function tabs(id,trigger){ var tabsBtn = document.getElementById(id).getElementsByTagName('h2')[0].getElementsByTagName('a') var tabsContent = document.getElementById; (id) .getElementsByTagName('p'); for(var i = 0,len = tabsBtn.length; i < len; i ){
tabsBtn[i].index = i; if(trigger == 'click'){ tabsBtn[i].onclick = function(){
clearClass()
this.className = 'on'
showContent(this.index) );
}
}else if(trigger == 'mouseover'){
tabsBtn[i].onmouseover = function(){
clearClass()
this.className = ' on';
showContent(this.index);
}
}
}
function showContent(n){
for(var i = 0,len = tabsBtn.length; i < len; i ){
tabsContent[i].className = 'hide'
}
tabsContent[n].className = 'tabs-content'
함수 ClearClass() {
for(var i = 0,len = tabsBtn.length; i < len; i ){
tabsBtn[i].className = ''
}
}
}
참고:
1. 홈페이지, 기술, 생활, 작품 등의 제목은 h2 태그에 있습니다.
2. 현재 제목을 표시하기 위해 이름이 붙은 클래스를 사용합니다. selected 등의 다른 클래스로 변경하는 경우 tabs.js에서 해당 내용을 수정해야 합니다.
3. 제목에 해당하는 내용은 p 태그에 있습니다. p 태그 내에 더 이상 p 태그가 있을 수 없습니다.
PS: 심심할 때 배운 자바스크립트 지식을 바탕으로 무심코 작성한 효과들입니다.
clearClass()
this.className = 'on'
showContent(this.index) );
}
}else if(trigger == 'mouseover'){
tabsBtn[i].onmouseover = function(){
clearClass()
this.className = ' on';
showContent(this.index);
}
}
}
function showContent(n){
for(var i = 0,len = tabsBtn.length; i < len; i ){
tabsContent[i].className = 'hide'
}
tabsContent[n].className = 'tabs-content'
함수 ClearClass() {
for(var i = 0,len = tabsBtn.length; i < len; i ){
tabsBtn[i].className = ''
}
}
}
참고:
1. 홈페이지, 기술, 생활, 작품 등의 제목은 h2 태그에 있습니다.
2. 현재 제목을 표시하기 위해 이름이 붙은 클래스를 사용합니다. selected 등의 다른 클래스로 변경하는 경우 tabs.js에서 해당 내용을 수정해야 합니다.
3. 제목에 해당하는 내용은 p 태그에 있습니다. p 태그 내에 더 이상 p 태그가 있을 수 없습니다.
PS: 심심할 때 배운 자바스크립트 지식을 바탕으로 무심코 작성한 효과들입니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.