Este artículo ha compartido con usted el código específico para JS para implementar un efecto de conmutación de pestañas simple para su referencia. El contenido específico es el siguiente
Código de conmutación de la pestaña JS:
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta name = "generador" content = "editPlus®"> <meta name = "autor" content = ">"> <meta name = "keywords" content = ""> <meta name = "centre ="> "> <title> document <bitle <title> type = "text/css" href = "base.css" media = "all"/> <style type = "text/css"> a {color: #a0b3d6;}. Tabs {border: 1px sólido #a0b3d6; margen: 100px; ancho: 300px;}. A {fondo: #eaf0fd; line-height: 30px; relleno: 0 20px; display: inline-block; borde-derecha: 1px sólido #a0b3d6; border-bottom: 1px sólido #a0b3d6; flotante: izquierda;}. Tabs-Nav .on {fondo: blanco; border-retiro: 1px sólido blanco; _Position: relativo;}. Tabs-Content {relleno: 20px; border-top: 1px sólido #a0b3d6; margin-top: -1px;} </ystye> </toble> <body> <Div Id = "Tabs"> <h2> <a hrf = "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 Obras obras obras obras obras obras </p> </div> <br/> <br/> <div id = "tabs2"> <h2> <a href = "javascript :;"> 11111 </a> <a href = "javaScript :;"> 22222 </a> <a href = "javascript :;"> 33333 </a> </h2> <p> 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 111111111111111111111111111111111111111111111111111111 </p> <p> 22222222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222 type = "text/javascript" src = "tabs.js"> </script> <script type = "text/javascript"> window.onload = function () {tabs ('tabs', 'click'); tabs ('tabs2', 'mouseover');} </script> </body> </html>Tabs.js
Tabs de función (id, disparador) {var tabsbtn = document.getElementById (id) .getElementsByTagName ('H2') [0] .getElementsByTagName ('a'); var tabsContent = document.getElementById (id) .getElementsByTagName ('P'); for (var i = 0, len = tabsbtn.l longitud; i ++) {tabsbtn [i] .index = i; if (thrigger == '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 ++) { ClearClass () {for (var i = 0, len = tabsbtn.length; i <len; i ++) {tabsbtn [i] .classname = '';}}}base.css
@CharSet "UTF-8";/*@ name: base@ function: restablecer el estilo predeterminado del navegador*//*Evitar el impacto del color de fondo definido por el usuario en la página web, agregue para permitir a los usuarios personalizar las fuentes*/html {color: negro; fondo: blanca;}/*Los márgenes internos y exteriores generalmente hacen las posiciones de rendimiento de cada estilo de navegador diferente al estilo de un navegador diferente de un estilo de navegador diferente de cada navegador de un estilo de navegador. */cuerpo, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, código, forma, campos de campos, leyenda, entrada, textAREA, p, blockquote, th, td, hr, botón, artículo, aparte, detalles, figcapción, figura, pie, cabeza, cabeza, hgroup, menú, sección, sección, sección, sección {margen: 0; relleno: 0;}/* Tenga en cuenta que los elementos de formulario no heredan la fuente principal*/cuerpo, botón, entrada, entrada, seleccionar, TextArea {Font: 12px Simsun, Tahoma, Arial, Sans-Serif;} Entrada, seleccionar, TextAREA {Font-Size: 100%;}/* Eliminar las márgenes de cada Tabla y hacer su edgios Overlap*/ {border-colapse: colapso; border-spacing: 0;}/* es decir, el error fijado: th no herede text-align*/th {text-align: herhherit;}/* elimina el borde predeterminado*/fieldset, img {border: none;}/* ie6 7 8 (q) muestra de inscripción como representación en línea*/if rame {visual este elemento*/abbr, acrónimo {border: none; font-variant: normal;}/*consistente del estilo*/del {text-decoration: line-through;} dirección, subtítulos, cite, código, dfn, em, th, var {font-style: normal; font-weight: 500;}/*eliminar la identificación antes de la lista, li inherit*/ol, ul, ul, ul, ul, ul, ul, ul, UL {list-style:none;}/* Align is the most important factor in typeface, don't center everything */caption,th {text-align:left;}/* From yahoo, let the title be customized, Adapt to multiple system applications*/h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:500;}q:before,q:after {contenido: '';}/* unificado superscript y subíndice*/sub, sup {font-size: 75%; line-height: 0; posición: relativo; vertical-align: basal;} sup {top: -0.5em;} sub {fondo: -0.25Em;}/* Permita que el enlace se vaya a la pantalla en el estado de Hover*/a: hover: hover: hers {Text-Decoration: Underline;}/*El suboficial no se muestra de forma predeterminada, manteniendo la página concisa*/ins, a {text-decoration: none;}/*ie6,7 Eliminación de línea de punto de enfoque*/a: focus,*: focus {Outline: none;}/*clare float*/. clearfix: antes, .clarfix: después de {content: ";"; ";"; {claro: ambos; desbordamiento: oculto;}. clearfix {zoom: 1; /* para ie6 ie7*/}. clare {clare: thuss; display: block; overflow: hidden; altura: 0; línea de línea: 0; font-size: 0;}/* Establezca visual */. Fl {float: izquierda; display: inline;}. fr {float: right; visualLo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.