이 기사에서는 JS가 참조를위한 간단한 탭 전환 효과를 구현하기위한 특정 코드를 공유했습니다. 특정 내용은 다음과 같습니다
JS 탭 전환 코드 :
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta name = "generator"content = "editplus®"> <meta name = "author"content = ""> <meta name = "keywords"content = "" "<meta name ="deccipt = "" "> title> type = "text/css"href = "base.css"media = "all"/> <style type = "text/css"> a {color : #a0b3d6;}. 탭 {테두리 : 1px solid #a0b3d6; 마진 : 100px; 너비 : 300px;} a {배경 : #eaf0fd; 라인-하이 라이트 : 30px; 패딩 : 0 20px; 디스플레이 : 인라인-블록; 경계-오른쪽 : 1px Solid #a0b3d6; 경계 바닥 : 1px solid #a0b3d6; float;}.}. tabs-nav .on {배경 : 흰색; 경계-바닥 : 1px solid White; _position : inverative;}. Tabs-Content {Padding : 20px; Border-Top : 1PX Solid #A0B3D6; 마진-탑 : -1px;} </style> </head> <body> <div id = "탭"> <h2> <a href = "javascript :;"> home </a> <a href="javascript:;">Technology</a><a href="javascript:;">Life</a><a href="javascript:;">Works</a></h2><p>Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home </p><p>Technology Technology Technology Technology Technology Technology Technology Technology Technology Technology Technology Technology Technology Technology Technology Technology</p><p>Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Life Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works </p> </div> <br/ <br/ <br/> <div id = "tabs2"> <h2> <a href = "javaScript :;"> 11111 </a> <a href = "javaScript :;"> 22222 </a> <a href="javascript:;">33333</a></h2><p>111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111 </p> <p> 2222222222222222222222222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222 유형 = "text/javaScript"src = "tabs.js"> </script> <script type = "text/javaScript"> windtabs.js
함수 탭 (id, trigger) {var tabsbtn = document.getElementById (id) .getElementsByTagName ( 'h2') [0] .getElementsByTagName ( 'a'); var tabsContent = document.getElementById (id) .getElementsByTagName ( 'P'); afbtn = tabsbtn; 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);}} 함수 showContent (n) {for (var i = 0, len = tabsbtn.length; i <len; i ++) {tabscontent [i] .classname = 'hide';} tabscontent [n] .classnam = 'tabs-comtent';} 기능 clearclass () {for (var i = 0, len = tabsbtn.length; i <len; i ++) {tabsbtn [i] .className = '';}}}base.css
@charset "utf-8";/*@ name : base@ function : 브라우저 기본 스타일을 재설정*//*웹 페이지에서 사용자 정의 배경 색상의 영향을 방지하고, 사용자가 글꼴을 사용자 정의 할 수 있도록 추가 할 수 있도록 추가*/html {검은 색; 배경;}/*각 브라우터 스타일의 성능 위치가 다릅니다. */body, div, dl, dt, dd, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, code, code, fielddset, legend, 입력, textarea, p, blockquote, th, td, hr, 기사, 제쳐두고, 세부 사항, 그림, 그림, 피어스, 헤드 그룹, 메뉴, 섹션, 섹션 {margin : 0; padding : 0;}/* 형태 요소는 부모 글꼴*/바디, 버튼, 입력, 선택, TextRea {font : 12px simsun, tahoma, arial, sans-serif;} 입력, 선택, 텍스트 {100%; {Border-Collapse : Collapse; Border-Spacing : 0;}/* 즉, 버그 고정 : Th는 텍스트-정렬을 상속하지 않습니다*/th {text-align : inherit;}/* 기본 경계를 제거하십시오*/fieldset, img {porder : none;}/* ie6 7 8 (q) 버그 표현으로서의 버그 디스플레이*/iframe {remame {remame}/iframe. 이 요소*/abbr, abronym {porder : none; font-variant : normal;}/*일관성 del 스타일*/del {line-strough;} 주소, 캡션, 인용, 코드, DFN, EM, TH, var {font 스타일 : font-weight : 500;}/*목록, li will the lill will in will on will in rill in rill on will in will in will in will in will in will in will the the wille {목록 스타일 : 없음;}/* 정렬은 서체에서 가장 중요한 요소입니다. 모든 것을 중앙에 중앙에 두지 마십시오*/caption, th {text-align : left;}/* 제목을 사용자 정의하고, 여러 시스템 응용 프로그램에 적응하고, H4, H5, H6 {font-size : 100%; font-weight; {content : '';}/* Unified SuperScript 및 Subscript*/sub, sup {font-size : 75%; line-height : 0; 위치 : 상대; 수직-정렬 : 기준선;} sup {top : -0.5em;} sub {하단 : -0.25em;}/* 링크 디스플레이가 hover 상태에서 링크 표시를하자 {Text-Decoration : Underline;}/*밑줄은 기본적으로 표시되지 않으며 페이지를 간결하게 유지하십시오*/ins, {text-decoration : a {text-decoration : a {text-decoration : at pocus point line 제거*/a : focus {focus {개요 : none;}/*clearfix :. {Clear : 둘 다; 오버플로 : 숨겨진;}. Clearfix {Zoom : 1; /* IE6 IE7*/}의 경우 {clear : clear : display : display : block; 오버 플로우 : 숨겨진; 높이 : 0; line-height : 0; font-size : 0;}/* js*/. hide {display : none! {float : 왼쪽; 디스플레이 : 인라인;}. fr {float : 오른쪽; 디스플레이 : 인라인;}위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.