Javascript는 탭 전환 효과를 구현합니다(자체 작성 네이티브 js)_javascript 기술

오늘날 페이지에는 팝업 레이어 효과, 원활한 스크롤 효과, 탭 전환 효과 등 다양한 페이지 효과가 많이 사용됩니다. 오늘은 네이티브 자바스크립트를 이용해서 직접 작성한 탭전환 효과를 공유해보겠습니다. 제 실력이 부족해서 문제점이 있으면 지적해주세요.
렌더링은 다음과 같습니다.

html 코드:

코드 복사 코드는 다음과 같습니다.

;meta charset="UTF-8">




tabs" id=" tabs">

홈페이지
< ;a href="javascript:;">기술
생활
작품

HomepageHomepageHomepageHomepageHomepageHomepage

기술 기술 기술 기술 기술 기술 기술 기술

생활 생활 생활 생활 생활 생활 생활 생활 생활

< ;p class="tabs-content hide">worksworksworksworksworks

11111
22222
33333

11111111111111111111111111111111

-content hide">22222222222222222222222222222222222

3333333333333333333333333333333333333<

>


여기서 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: 심심할 때 배운 자바스크립트 지식을 바탕으로 무심코 작성한 효과들입니다.