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

집

웹 프론트엔드

JS 튜토리얼

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

May 16, 2016 pm 05:40 PM

스위치 꼬리표

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

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

 
<!DOCTYPE HTML> 
<html lang="en-US"> ;meta charset="UTF-8"> 
<title>js-tabs</title> 
<link rel="stylesheet" type="text/css" href="css/base. css" media=" all"/> 
<style type="text/css"> 
a{color:#a0b3d6;} 
.tabs{border:1px solid #a0b3d6;margin :100px;너비: 300px;} 
.tabs-nav a{배경:#eaf0fd;line-height:30px;padding:0 20px;display:inline-block;border-right:1px solid #a0b3d6;border- 하단:1px 단색 # a0b3d6;float:왼쪽;} 
.tabs-nav .on{배경:흰색;border-bottom:1px 단색 흰색;_위치:상대적;} 
.tabs-content{패딩:20px ;border-top: 1px solid #a0b3d6;margin-top:-1px;} 
</style> 
</head> 
<body> tabs" id=" tabs"> 
<h2 class="tabs-navclearfix"> 
<a href="javascript:;" class="on">홈페이지</a> 
&lt ;a href="javascript:;">기술</a> 
<a href="javascript:;">생활</a> 
<a href="javascript :; ">작품</a> 
</h2> 
<p class="tabs-content">HomepageHomepageHomepageHomepageHomepageHomepage</p> 
 <p class="tabs-content hide">기술 기술 기술 기술 기술 기술 기술 기술</p> 
<p class="tabs-content hide">생활 생활 생활 생활 생활 생활 생활 생활 생활</p> 
< ;p class="tabs-content hide">worksworksworksworksworks</p> 
</div> 
<br/><br/> 
<div class="tabs " id="tabs2"> 
<h2 class="tabs-navclearfix"> 
 <a href="javascript:;" class="on">11111</a> 
<a href="javascript:;">22222</a> 
<a href= "javascript:;">33333</a> 
</h2> <p class="tabs-content">11111111111111111111111111111111</p> -content hide">22222222222222222222222222222222222</p> 
<p class="tabs-content 숨기기">3333333333333333333333333333333333333< 
 </div> 
</body> 
</html> 
<script type="text/javascript" src="tabs.js"></script> ><script type="text/javascript"> 
window.onload = function(){ 
tabs('tabs','click') 
tabs('tabs2','mouseover' ); 
} 
</script> 

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